模型更新，但即使使用ngzone也不会启用Angular UI

Question

我有一个要求，其中从Angular之外的外部输入字段中我获得输入值，使用我在Angular模块中触发服务，该服务从后端获取相关数据。订阅函数在内部更改方面工作正常，但是由于此处输入值来自全局函数，因此UI不会呈现。

我尝试过zone.run，detectChange和detectCheck，但似乎没有任何更新UI。UI应该使用suggestedItems数组显示项目列表。请让我知道怎么了。

    import { Component, OnInit, HostListener, NgZone, ChangeDetectorRef } from '@angular/core';
    import { BackendApiService } from '../services/backend-api.service';
    import { WindowAccessService } from '../services/window-access.service';
    @Component({
      selector: 'app-search-suggestion',
      templateUrl: './search-suggestion.component.html',
      styleUrls: ['./search-suggestion.component.scss']
    })
    export class SearchSuggestionComponent implements OnInit {
      suggestionHeaders = ['Item', 'Item name', 'Item category', 'Item details'];
      suggestedItems; dummyRequestObj; value;
      calledFromOutside(newValue: String) {
        this.zone.run(() => {
        this.value = newValue;
        this.dummyRequestObj.conditions = [];
        this.dummyRequestObj.conditions.push({
                        'column': 'SEARCH_BY_NAME',
                        'value': this.value
                        });
          // this.chngDt.detectChanges();
        this.items.getData(this.dummyRequestObj, false, false);
        console.log(this.value);
      });
      }
      // tslint:disable-next-line:max-line-length
      constructor( public items: BackendApiService, private zone: NgZone, public refWin: WindowAccessService, private chngDt: ChangeDetectorRef) {
        this.suggestedItems = new Array<any>();
    }
    ngOnInit() {
        this.items.updateItemList.subscribe(
          (data) => {
            console.log('was triggered');
            this.zone.run(() => {
            this.suggestedItems = data;
            });
            // this.chngDt.markForCheck();
            console.log('data', this.suggestedItems);
          }
        );
        this.refWin.nativeWindow.angularComponentRef = {
          zone: this.zone,
          componentFn: (value) => this.calledFromOutside(value),
          component: this
        };
        this.dummyRequestObj = {
                    "preciseSearch": false,
                    "useFuzzy": false,
                    "mode": 0,
                    "startIndex": 0,
                    "noOfRecords": 12,
                    "ascending": false
    };
    }
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th  *ngFor="let header of suggestionHeaders">{{header}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of suggestedItems">
                <td>{{item.erpPartNumber}}</td>
                <td>{{item.itemShortDesc}}</td>
                <td>{{item.productCategoryName}}</td>
                <td>{{item.itemDesc}}</td>
           </tr>
        </tbody>
    </table>
</div>

Answer 1

请添加一个带有适当控制台的ngonchanges((块。我们可以去那里。您很可能会发现：

• 变量未更新
• 变量正在重置为默认状态
• 或者，变更检测策略不是您所期望的
的设置

您需要将钩子添加到类定义中，以使Onchanges正确开火：

export class SearchSuggestionComponent implements OnInit, OnChanges {

更新：我将您的代码添加到plunkr中，并嘲笑您的服务调用。如果您将建议的代码填充到您的ngoninit：

时，您可能会有更好的运气

import { Component, OnInit, NgZone, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
        <tr>
          <th *ngFor="let header of suggestionHeaders">{{header}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of suggestedItems">
          <td>{{item.erpPartNumber}}</td>
          <td>{{item.itemShortDesc}}</td>
          <td>{{item.productCategoryName}}</td>
          <td>{{item.itemDesc}}</td>
        </tr>
        </tbody>
      </table>
    </div>`
})
export class AppComponent implements OnInit {
  suggestionHeaders = ['Item', 'Item name', 'Item category', 'Item details'];
  suggestedItems; dummyRequestObj; dummyResponseObj; value; items;
  // tslint:disable-next-line:max-line-length
  constructor( ) {
    this.suggestedItems = new Array<any>();
  }
  ngOnInit() {
    this.dummyResponseObj =  [ {'erpPartNumber': 'dadd', 'itemShortDesc': 'Mobile', 'itemDesc': 'LG Mobile',
      'productCategoryCode': '42', 'productCategoryName': 'Prisoners defense services', 'uom': 'EA'},
      {'erpPartNumber': 'data 2', 'itemShortDesc': 'Mobile', 'itemDesc': 'LG Mobile',
        'productCategoryCode': '323', 'productCategoryName': 'Prisoners defense services', 'uom': 'EA'}];
    this.items = this.dummyResponseObj;
    this.suggestedItems = this.dummyResponseObj;
         }
}

基本上，您试图过早补充该变量。您需要在OnInit中更新对象，以确保Angular准备就绪，模板随时间绑定到组件代码，并且更改检测是运行的。在ngoninit之前进行的很多次工作会导致模板问题，因为角度尚未完全启动。

希望这会有所帮助！欢呼