Угловой компонент, содержащий асинхронный канал: значение на экране никогда не обновляется.Как с этим бороться? - PullRequest
Новая
       24

Угловой компонент, содержащий асинхронный канал: значение на экране никогда не обновляется.Как с этим бороться?

0 голосов
/ 23 января 2019

У меня есть Angular-компонент, обертывающий «асинхронный канал» для выполнения некоторого запроса к 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;
      }
    }
  }
}

Вот вам план, который поможет вам понять, что я имею в виду: редактор / Код для вставки

Вы увидите, что каждый раз, когда вы нажимаете кнопку «язык», значение меняется, но отображаемая метка (которая обрабатывается моим компонентом) никогда не меняется. Я бы хотел, чтобы observableRefData менялся.

Обратите внимание, что кнопка для переключения языков предназначена только для примера. Не предлагайте ngx-translate, это не то, что я ищу.

1 Ответ

0 голосов
/ 24 января 2019

В строке 28 вашего src/codereadercomponent.ts файла вы пропускаете () с конца, поэтому вы не вызываете функцию, вы ищете переменную.

Вам необходимо обновить строку 28 следующим образом: -

this.loadData()

Вот обновленный plunkr

...