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);
  }
}

当我在 ngInit() 中更新 dataListOptions 或在它更新 DOM 后，我可以看到新选项，但是当我单击输入元素时，我仍然看不到新插入的数组数据。

我在更新后尝试使用 ChangeDetectorRef，但仍然没有成功。

我的问题是我应该怎么做才能使在 dataListOptions 定义之后添加的选项可见。我在检查 View 时可以看到它们，但在“下拉列表”中看不到它们

---更新---

我刚刚意识到 ExampleComponent 实现了 ControlValueAccessor。我不知道为什么要添加它，也不知道它是如何工作的，所以我需要做更多的调查，因为它看起来以某种方式涉及更新显示或域

---更新---

输入在一个循环中

Answer 1

我不确定为什么显示与检查的元素不一致，但我所要做的就是将 [attr.list]="'datalist'+x" 添加到 datalist 并使每个元素的 id 以某种方式唯一。

 <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>