Angular 13 Bootstrap 5 - 如何添加动态数据列表选项答案

【问题标题】：Angular 13 Bootstrap 5 - How add dynamic datalist optionsAngular 13 Bootstrap 5 - 如何添加动态数据列表选项
【发布时间】：2022-06-14 22:15:58
【问题描述】：

角度 13 引导程序 5

datalist.component.html

<div>
  <label for="{{ id }}" class="form-label">{{ label }}</label>
  <input
    class="form-control"
    list="{{ datalistOptions }}"
    [id]="id"
    [placeholder]="placeholder"
  />
  <datalist [id]="datalistOptions">
    <option
      *ngFor="let option of datalistOptions"
      value="{{ option }}"
    ></option>
  </datalist>
</div>

datalist.component.ts

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

@Component({
  selector: 'app-datalist',
  templateUrl: './datalist.component.html',
  styleUrls: ['./datalist.component.css']
})
export class DatalistComponent implements OnInit {
  @Input() id: string = '';
  @Input() label: string = '';
  @Input() placeholder: string = '';
  @Input() datalistId: string = '';
  @Input() datalistOptions: string[] = [];

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<form>
<fieldset>
  <legend>Dynamic Dataset</legend>
  <app-datalist
        id="autocomplete"
        label="autocomplete label"
        placeholder="autocomplete placeholder"
        datalistId="dataoptions"
        [datalistOptions]="datalistOptions"
      ></app-datalist>
</fieldset>
</form>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  datalistOptions = [
    'Bootstrap',
    'Foundation',
    'Semantic UI',
    'Bulma',
    'Materialize',
  ];
}

错误是“无法绑定到 'list'，因为它不是 'input' 的已知属性。但是当我有静态选项而不是动态选项时，错误就不存在了。这是 Stackblitz，与静态选项被注释掉，动态选项显示错误：

Stackblitz Example

【问题讨论】：

不应该是[list]="datalistOptions"吗？
无论哪种方式都有效。或者，在这种情况下不起作用。

标签： angular bootstrap-5

【解决方案1】：

找到答案：

使用 [attr.list]="" 语法代替 [list]。

https://github.com/angular/angular/issues/12759

【讨论】：