Question

我试图将我们使用的html模式组件化。 html看起来像这样

function mapper(array) {
      return array.map(function(i) {
         i.Domain = i.Domain.toLowerCase();
         return i;
    })
}

var array = [
   { "Name" : "Bill",
     "Domain" : "TEST.com",
   },
   { "Name" : "John",
     "Domain" : "JohnTest.com",
   },
   { "Name" : "Fred",
     "Domain" : "fredtest.com",
   }
]

var newArray = mapper(array);

console.log(newArray); /*[ { Name: 'Bill', Domain: 'test.com' },
    { Name: 'John', Domain: 'johntest.com' },
    { Name: 'Fred', Domain: 'fredtest.com' } ]*/

打字稿代码看起来像这样

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

  }
}

是否有解决方案，或者我不能使列表属性动态化。

如果我无法使属性动态，我可以确保每个组件的列表都有不同的ID。

Answer 1

要绑定到元素属性：

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

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

<input list="custom">

Angular2获取ERROR TypeError：无法分配给只读属性＆＃39; list＆＃39;对象＆＃39;＃<htmlinputelement>＆＃39;

1 个答案: