角度：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定义之后添加的选项可见。检查视图时可以看到它们，但不能在“下拉菜单”中看到它们

---更新---

我刚刚意识到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>

Answer 2

这是因为您的初始化数组的值和角度无法检测到最新的数组

尝试清空数组，然后像重新填充它一样

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