标签: angular5

我想问一下，我们如何从 subscribe 函数返回一个 promise。

这是代码：

A.ts

makeHttpRequest() {
    return this.http.get('https://example.com/login');
}

B.ts

class B {
    constructor(private a: A) {  
        this.a.makeHttpRequest().subscribe(data => {
            //How to return a promise from here
        });
    }

}

我提供了一个非常抽象的代码级别，如果有人在理解它时遇到任何问题，请告诉我。

我正在尝试制作一个包含多个组件的表单。我尝试使用模板驱动的表单来执行此操作。这是我遇到问题的代码：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <app-employee></app-employee>
      <hr>
      <app-experiences-and-education></app-experiences-and-education>
      <input type="submit" value="Submit" class="btn btn-primary btn block">
    </form>

这是员工组件：

    <div class="form-group">
  <label for="name"> Name </label>
  <input  type="text" name="name" [(ngModel)]="employee.name" #employeeName="ngModel" id="Name" minlength="3" required class="form-control">
  <div class="alert alert-danger mt-2" *ngIf="employeeName.errors?.required && employeeName.touched">
    Name Is Required
  </div>
  <div class="alert alert-danger mt-2" *ngIf="employeeName.errors?.minlength && employeeName.touched">
    Name at least 3 haracters
  </div>
</div>

<div class="form-group">
  <label for="address"> Address </label>
  <input type="text" name="address" [(ngModel)]="employee.address" #employeeAddress="ngModel" minlength="3" required class="form-control">
  <div class="alert alert-danger mt-2" *ngIf="employeeAddress.errors?.required && employeeAddress.touched">
    Address Is Required …

嘿伙计们，这似乎是什么问题？我在视图中使用开关盒。但它似乎不起作用。

template: `
  <div [ngSwitch]="color">
    <div *ngSwitchCase"'red'">You picked red</div>
    <div *ngSwitchCase"'green'">you picked green</div>
    <div *ngSwitchCase"'blue'">You picked blue</div>
  </div>

`,
styles: [`

`]
})

这是组件文件。

export class TestComponent implements OnInit {

    public color = "red";
    constructor() { }

    ngOnInit() {
    }
}

我在父组件中有两种方法：

public isOpen(index: number): boolean {
    const block = this.dropDownBlocks.find(b => b.index === index);
    return block.open;
  }

  public openDropDown(index: number) {
    const block = this.dropDownBlocks.find(b => b.index === index);
    const i = this.dropDownBlocks.indexOf(block);
    this.dropDownBlocks[i].open = !block.open;
  }

不管做什么。

在我确定的子组件中：

@Output() openTab = new EventEmitter<number>();
@Output() opened = new EventEmitter<number>();

下面在我写的子组件中：

public openDropDown(index: number) {
   this.openTab.emit(index);
}

public isOpen(index: number) {
   return this.opened.emit(index);
}

模板子项是：

<div class="header" (click)="openDropDown(2)"></div>
<div class="body" [hidden]="!isOpen(2)">

这意味着我调用子方法并将主动权转移到具有相同名称的父方法：

public openDropDown(index: number) {
       this.openTab.emit(index);
    }

因此，子组件包含在父组件中，如下所示：

<app-missed-plan (openTab)="openDropDown($event)" …

我要在官方链接中发现 SweetAlert ，所以我想在我的应用程序 angular5 中使用它。

我是这样安装的：

npm install sweetalert --save

我已将它导入到我的组件中：edit-client.component 与此：

  import swal from 'sweetalert';

这是我尝试使用的文件 editClient.component.ts ：

import swal from 'sweetalert';

Component({
  selector: 'app-edit-clients',
  templateUrl: './edit-clients.component.html',
  styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {

EditClient(){
    this.clientService.updateClient(this.client)
      .subscribe(data=>{
        console.log(data);

        swal('mise a jour effecture !');

        this.router.navigate([ '../../../list' ], { relativeTo: this.activatedRoute });
        },err=>{
        console.log(err);
        alert("Probleme");
      })
  }


}

但是在运行这个例子时，我看不到警报，而是收到一个错误：

RROR TypeError: sweetalert_1.default is not a function
    at SafeSubscriber.eval [as _next] (edit-clients.component.ts:39)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187) …

我正在使用 mat-drawer 并且我想在关联的组件中收到通知，当打开和关闭 mat-drawer 以添加一些逻辑时；

html 具有以下结构：

<mat-drawer-container class="example-container"  autosize>
<mat-drawer #drawer class="custom-sidenav" mode="side">
    <div>
  <button routerLink="/" routerLinkActive="active"
   style="margin-top: 50px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color: red">home</mat-icon>
  <b style="margin-left: 20px">Home</b>
  </button>
</div>
  <div>
  <button routerLink="/transactions" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color:gray">trending_flat</mat-icon>
  <b matBadge="{{totalTransactions}}" matBadgeColor="red" matBadgeOverlap="false" style="margin-left: 20px">Transactions</b>
  </button>
</div>
  <div *ngIf="isAdmin">
        <button routerLink="/fetch-data" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
            <mat-icon  matBadge="{{totalCertificates}}" matBadgePosition="before" matBadgeColor="accent"  style="color:gray">description</mat-icon>
          <b style="margin-left: 20px">Certificates</b>
          </button>
  </div>
  <div> …

我已经安装了 tinymce angular包，我可以正常工作：

https://www.npmjs.com/package/@tinymce/tinymce-angular

但我希望更改组件内的初始化值，以便我可以从每个环境的配置加载皮肤链接等，而不是在 html 中对此进行硬编码。

我试过了：

import tinymce from 'tinymce/tinymce';

并使用：

tinymce.init({
    skins: '/assets/skins'
});

然而，这抱怨做一个 npm install @types/tinymce （我已经完成了，但它似乎没有识别这个包）

谁能建议我做错了什么？文档不是很好，经过无休止的搜索后，我似乎无法在线找到任何帮助。

注意：我正在将 /node_modules/tinymce/skins 中的皮肤复制到 /assets/skins 中，所以我只是想要一种能够指向该位置以便编辑器加载它们的方法

屏幕上显示的值是正确的，但我在日志中收到此错误：ERROR TypeError: Cannot read property 'name' of undefined。

我用 '?' 尝试了几种方法 像这样： [(ngModel)]="customer?.name"但不起作用，那么我需要帮助:)

在服务中：

  getCustomer(name:string){
    let url = `http://localhost:8081/api/customer/${name}`;

    return this.http.get<Customer>(url);
  }

在组件的 .ts 中：

customer: Customer;

this.customerService.getCustomer(this.pName)
      .subscribe(
        (data) =>{  
          this.customer = data['customer'];
        },
        err =>{
          console.log('getCustomer failed');
        }
    );

在模板中：

<input type="text" class="form-control" id="myname" required [(ngModel)]="customer.name" name="myname">

但这不行。

你有想法吗 ？

谢谢，

我正在尝试编辑表单，当我想显示要编辑的值时，使用 setValue 出现错误“错误错误：找不到名称为采购的表单控件。 ”

组件.ts

ngOnInit() {
  this.form = new FormGroup({
      customer: new FormGroup({
        name: new FormControl(),
        lastname: new FormControl(),
        address: new FormControl(),
        phone: new FormControl()
      }),
      createdAt: new FormControl(),
      purchases: new FormArray([])
  });
}

我的编辑功能

onEdit(invoice) {    
  this.form.setValue(invoice)   
}

组件.html

<div class="col-md-8">
    <div formGroupName="customer">
      <h3>Customer</h3>
      <label>Name: <input class="form-control" type="text" formControlName="name"> </label>
      <label>Last Name:<input class="form-control" type="text" formControlName="lastname"></label>
      <label>Phone:<input class="form-control" type="text" formControlName="phone"></label>
      <label>Address:<input class="form-control" type="text" formControlName="address"></label>
   </div>
   <div><li formArrayName="purchases"></li></div>
</div>

在 StackBlitz 中查看

控制台中的值

我在ngOnInitcontroller.ts 中订阅了一种方法。从视图中，有一个选项可以从列表中选择不同的用户，这些用户重定向到同一页面，只是 URL 中的 ID 发生了变化。因此ngOnInit被多次调用。因此方法被多次订阅。我们多次选择不同的用户方法被调用为每个选择的成员数量，即如果我们选择 3 个用户一个接一个的路由被更改 3 次因此当 observable 获得结果时方法被调用 3 次。但是如果我们刷新页面一切正常。但是如果我使用 unsubscribe inngDestroy那么它就不会在ngOnInit. 有什么解决办法吗。

 ngOnInit() { 
    this._myService.detailsReceived.subscribe((obj: details) => 
       {console.log(obj.text)}
    );
 }

同一页面上的路线变化是

this.route.navigate(['user-home', userid]);

我需要这种方法保持订阅直到用户注销，因此不能使用 subscribe.Take(1)