Angular2得到错误类型错误：无法分配给对象'#<HTMLInputElement>'的只读属性'list'答案

【问题标题】：Angular2 getting ERROR TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'Angular2得到错误类型错误：无法分配给对象'#<HTMLInputElement>'的只读属性'list'
【发布时间】：2018-06-15 10:42:49
【问题描述】：

我正在尝试对我们使用的 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。

【问题讨论】：

这是在做什么：[list]="listidentx"?

标签： angular angular2-template angular2-forms

【解决方案1】：

绑定到元素属性：

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

如果listident='custom'，在运行时会如下所示：

<input list="custom">

【讨论】：