Добавление элемента в массив не обновляет пользовательский интерфейс

Question

Я пытаюсь обновить массив после получения данных json из конечной точки, но я не получаю ожидаемых результатов в интерфейсе.

export class LocationSectionComponent implements OnInit{


  myControl = new FormControl();
  options : string[] =  ['0089/PITT', '0085/CALI', '0090/MASS'];
  filteredOptions: Observable<string[]>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );

      this.fetchData();
  }

  private _filter(value: string): string[] {
        const filterValue = value.toLowerCase();
        return this.options.filter(option => option.toLowerCase().includes(value));
      }

   private fetchData ()
   {
   this.http.get('http://localhost:9090/api/v1/facility/1')
   .subscribe(responseData => {
    const facilityOrigin = responseData.facilityNumber +"/"+ responseData.name;
    this.options.push(facilityOrigin);
    console.log(this.options);
    });
   }

при выполнении операции pu sh через метод fetchData () дает мне обновленный массив, подобный этому

(4) ["0089/PITT", "0085/CALI", "0090/MASS", "89/PITT"]
0: "0089/PITT"
1: "0085/CALI"
2: "0090/MASS"
3: "89/PITT"
length: 4
__proto__: Array(0)

, но в интерфейсе я вижу только 3 варианта, то есть ['0089/PITT', '0085/CALI', '0090/MASS']. Как исправить эту проблему. Это проблема с областью действия или что-то еще?

Answer 1

вы можете попробовать следующее:

this.options = [...this.options];  // after push

Если вы установили ChangeDetectionStrategy.OnPu sh для своего компонента, вы можете попробовать вызвать this.cdr.detectChanges ();

см .: onpu sh -change-обнаружение-как-это-работает

Answer 2

Попробуйте

this.options = this.options.concat(facilityOrigin);

вместо

this.options.push(facilityOrigin);