Angular 6 订阅不会刷新 UI答案

【问题标题】：Angular 6 subscribe doesn't refresh UIAngular 6 订阅不会刷新 UI
【发布时间】：2019-04-18 08:26:23
【问题描述】：

我的主要问题是，我的组件在输入数据后没有刷新 UI。我总是使用刷新页面来查看更改。我认为.subscribe 有任何问题。我使用 Angular 6。在此之前，当我使用 pure And 2 env 时效果很好。

我的组件：

ngOnInit() {
    this.company = [];
    this.inputCompanyService.getAllCompany().subscribe(company => {
      this.company = company;
    });
  }


postCompany(event, companyName, ) {
    var result;
    var newCompany = {
      company_name: companyName.value,
      id: companyName.id
    };
    result = this.inputCompanyService.postCompany(newCompany);
    result.subscribe(x => {
      this.company.push(newCompany);
      companyName.value = '';
    });

  }

我的服务：

getAllCompany() {
            return this._http.get('http://localhost:3000/api/companys')
                  .map(res => res.json());
      }

postCompany(company_name) {
            var headers = new Headers();
            headers.append('Content-Type', 'application/json');
            return this._http.post('http://localhost:3000/api/company', JSON.stringify(company_name), { headers: headers })
                  .map(res => res.json());
      }

HTML：

<div class="input-company">
  <p>
    <mat-form-field appearance="legacy">
      <input matInput [(ngModel)]="companyName.company_name" placeholder="Here..." autofocus #companyName>
      <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
    </mat-form-field>
    <button mat-raised-button color="warn" (click)="postCompany($event, companyName)">Click me !</button>
  </p>
  <div *ngFor="let company of company.company">
    <li>
    <button mat-flat-button (click)="deleteCompany(company)">X</button>
    <button mat-flat-button>N</button>
    <button mat-stroked-button>{{company.id}}-{{company.company_name}}</button>
  </li>    
  </div>
</div>

【问题讨论】：

吹毛求疵：这条线<div *ngFor="let company of company.company"> 看起来很糟糕。您在这里使用了三个具有相同名称的变量/属性。

标签： angular typescript

【解决方案1】：

异步调用发生在 Angular 区域之外。

最简单的解决方法：

// Inside the subscribe block to update the variables and force angular to check variables
this._ngZone.run(() => {
    this.company.push(newCompany);
    companyName.value = '';
});

如果你想使用 AsyncPipe，你可以稍微重构一下：

this.companies$: Observable<any>;
ngOnInit() {
    this.companies$ = this.inputCompanyService.getAllCompany();
}

还有模板...

<div class="input-company">
  <p>
    <mat-form-field appearance="legacy">
      <input matInput [(ngModel)]="companyName.company_name" placeholder="Here..." autofocus #companyName>
      <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
    </mat-form-field>
    <button mat-raised-button color="warn" (click)="postCompany($event, companyName)">Click me !</button>
  </p>
  <ng-container *ngIf="(companies$ | async) as companies)"
    <div *ngFor="let company of companies.company">
      <li>
       <button mat-flat-button (click)="deleteCompany(company)">X</button>
       <button mat-flat-button>N</button>
       <button mat-stroked-button>{{company.id}}-{{company.company_name}}</button>
     </li>    
    </div>
  <ng-container>
</div>

祝你好运！

【讨论】：

异步调用肯定不会在区域之外发生。

【解决方案2】：

您正在检索公司并将它们存储在一个数组中..

this.company = [];
this.inputCompanyService.getAllCompany().subscribe(company => {
      this.company = company;
});

但是，您在模板中遍历 company.company：

<div *ngFor="let company of company.company">

应该是：

 <div *ngFor="let c of company">
   <li>
    <button mat-flat-button (click)="deleteCompany(c)">X</button>
    <button mat-flat-button>N</button>
    <button mat-stroked-button>{{c.id}}-{{c.company_name}}</button>
  </li>    
 </div>

我将变量重命名为 c 以避免混淆。您还应该考虑将数组重命名为 companies 以便于理解。

【讨论】：