Angular 包含异步管道的组件：屏幕上的值从未刷新。如何处理？

Question

我有一个 Angular 组件包装 'async pipe' 以便在 REST API 上执行一些请求。我的组件根据给定的参数显示一个值。我的组件的输入之一可能会发生变化。当输入值发生变化时，我的组件能够接收新值并进行处理。但是显示值并没有根据新的输入刷新。

你能帮我找出我做错了什么吗？

@Component({
  selector:'app-mycomponent',
  template: `
    <div>This is my Component
      <div style="text-align:center">
          <button (click)="changeValue(1)">ENGLISH</button>
          <button (click)="changeValue(2)">FRANCAIS</button>
      </div>
      <dl>
        <dt>
          Current value is:
        </dt>
        <dd>{{_currentValue}}</dd>
        <dt>
          Child value is:
        </dt>
        <dd><app-codereader name='customCode' value={{_currentValue}} [languageIsoCode]='languageIsoCode'></app-codereader></dd>
      </dl>
    </div>`
})
export class MyComponent {
  private _currentValue = 1;

  changeValue(newValue:numeric) {
    this._currentValue = newValue;
  }

  get languageIsoCode() {
    if (1 == this._currentValue) {
      return 'en';
    } else if (2 == this._currentValue) {
      return 'fr';
    }
    return undefined;
  }

}


@Component({
  selector: 'app-codereader',
  template: '<span>{{ observableRefData | async }}</span>'
})
export class CodeReaderComponent implements OnInit, OnChanges {
  @Input() name: string;
  @Input() value: any;
  @Input() languageIsoCode: string;

  observableRefData$: Observable<string>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadData();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.observableRefData$ && changes.languageIsoCode && changes.languageIsoCode.currentValue) {
      this.observableRefData$.subscribe(data => {
        console.log('Lang has changed:', changes.languageIsoCode.currentValue);
        this.languageIsoCode = changes.languageIsoCode.currentValue;
        this.loadData;
      });
    }
  }

  loadData(){
    if (this.value && this.name && this.languageIsoCode) {
      console.log('Reload data', this.value, this.name, this.languageIsoCode);
      switch (this.name) {
        case 'customCode':
          this.observableRefData$ = this.dataService.searchForCategoryCode(this.value, this.languageIsoCode);
          break;
        default:
          //this.observableRefData$ = this.dataService.searchForXXX(this.name, this.code, this.languageIsoCode);
          break;
      }
    }
  }
}

这里有一个 plunkr 可以帮助您理解我的意思： editor / Embed

您会看到，每次点击 'language' 按钮时，值都会发生变化，但显示的标签（由我的组件处理）永远不会改变。我希望 observableRefData 有所改变。

请注意，切换语言的按钮仅供示例使用。不要建议 ngx-translate，那不是我要找的。

Answer 1

在您的 src/codereadercomponent.ts 文件的第 28 行，您从末尾缺少 ()，因此您不是在调用函数，而是在寻找变量。

您需要将第 28 行更新为以下内容：-

this.loadData()

这是更新后的 plunkr

Angular 包含异步管道的组件：屏幕上的值从未刷新。如何处理？

Angular component containing async pipe: on-screen value never refreshed. How to deal with that?

asynchronous

pipe

web-component

observable

angular