Angular2 getting ERROR TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'

Question

我正在尝试对我们使用的 html 模式进行组件化。 html 看起来像这样

    <input class="sidebarInputDevice" type="search"  [list]="listidentx" placeholder="Search {{label}}..." (input)="deviceSelected($event.target.value)"> {{listidentx}}
<datalist [id]="listidentx">
  <option *ngFor="let item of items">{{item.name}}</option>
</datalist>

打字稿代码如下所示

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



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

  constructor() { 
    //this.listidentx='working';
  } 

  @Input() 
    items:{}[] = [];

  @Input() 
    label = '';

  @Input()
    listident='custom';

    listidentx = 'bacon';


  @Output() 
    valueChange: EventEmitter<number> = new EventEmitter();

  ngOnInit() {
    console.log(this.items);
    console.log("-----");
    for (var i=0;i<this.items.length;i++) {
      console.log(this.items[i]);
    }
    console.log("^----");
  }

  valSelected(value) {
    this.valueChange.emit(value);

  }
}

我收到以下错误

ERROR TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'

有没有办法解决这个问题，或者我不能使列表属性动态化。

如果我不能使属性动态化，我能否确保每个组件的列表都有不同的 ID。

Answer 1

要绑定到元素属性：

<input [attr.list]="listindent">

如果listident='custom'，在运行时它会是这样的：

<input list="custom">

Angular2 getting ERROR TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'

Angular2 getting ERROR TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'

angular2-forms

angular2-template

angular