Angular: DataList не обновляет отображение

Question

У меня есть шаблон, как показано ниже:

<div *ngFor="let x of inputs">
  <input type="text" list="datalist" name="datalist">
    <datalist id="datalist">
      <option *ngFor = "let i of dataListOptions" [value]="i">{{i-1}}</option>
    </datalist>
</div>

И файл TS, подобный этому:

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
     this.dataListOptions.push(123);
  }
}

Когда я обновляю dataListOptions в ngInit () или после того, как он обновляет DOMкак я вижу новые опции, но когда я нажимаю на элемент ввода, я все еще не вижу вновь вставленные данные массива.

Я попытался использовать ChangeDetectorRef после обновления, но все равно не повезло.

Мой вопросэто то, что я должен сделать, чтобы сделать параметры, добавленные после определения dataListOptions, видимыми.Я вижу их, когда осматриваю вид, но не вижу их в «раскрывающемся списке»

--- ОБНОВЛЕНИЕ ---

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

--- UPDATE ---

Вход в цикле

Answer 1

Я не уверен, почему отображение не соответствует проверяемому элементу, но все, что мне нужно было сделать, это добавить [attr.list]="'datalist'+x" к datalist и сделать идентификатор каждого элемента каким-то уникальным.

 <div *ngFor="let x of inputs">
  <input type="text" [attr.list]="'datalist'+x" id="input{{x}}" name="input{{x}}">
    <datalist id="datalist{{x}}">
      <option *ngFor = "let i of dataListOptions" [value]="i">{{i-1}}</option>
    </datalist>
</div>

Answer 2

Это потому, что у вас есть инициализированный массив со значением, а angular не может обнаружить для последнего

Попробуйте очистить массив и снова заполнить его как

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
          this.dataListOptions=[]; // this is main part of working code
     for (var i =0; i <=6; i++) {
        this.dataListOptions.push(i);
          }
     this.dataListOptions.push(123);
  }
}