0
私のオートコンプリートはうまく働いていましたが、wc.WorkcenterIdではなくmd-optionの[value]をオブジェクト自体に変更しました。私はリストを完全にうまくフィルタリングできますが、何らかの理由で何らかの理由でfilterWorkcenters()メソッドがトリガされ、wcオブジェクトがそのコンポーネントに送信され、コンポーネントをクラッシュさせます。なぜなら、明らかにtoLowerCase()をオブジェクト(wc.WorkCenterIdだけが必要です)。これを修正するにはどうすればよいですか? FormGroupのctrl値が必要なので、私は戻れません。プロパティだけでなく、適切なオブジェクトを持つためです。[value]がオブジェクトの場合、Material2オートコンプリートの使い方は?
マイHTML:
<div class="col-md-offset-2 form-item">
<md-form-field class="full-width">
<input required mdInput placeholder="Old workcenter number" [mdAutocomplete]="auto" formControlName="oldWorkcenter">
<md-autocomplete #auto="mdAutocomplete" style="max-height:500px !important;" [displayWith]="displayFormat">
<md-option *ngFor="let wc of oldWorkcentersFiltered | async" [value]="wc">
<span>No.: <b>{{ wc.WorkcenterId }}</b>, Type: <b>{{ wc.LineType }}</b></span>
</md-option>
</md-autocomplete>
</md-form-field>
</div>
マイTS:
onSelectPlant(plant: Plant) {
this.oldWorkcentersFiltered = this.newLineForm.get('oldWorkcenter').valueChanges
.startWith(null)
.map(query => query ? this.filterWorkcenters(query) : this.oldWorkcenters.filter(x => x.PlantNumber === plant.PlantNumber).slice())
this.getAllMonitorsForPlant(plant);
this.newLineForm.get('oldWorkcenter').enable();
}
private filterWorkcenters(query: string) {
console.log(query);
const test = this.oldWorkcenters.filter(wc => {
return wc.WorkcenterId.toLowerCase().indexOf(query.toLowerCase()) === 0;
});
return test;
}
に
を変更することにより、それを修正(値)this.oldWorkcentersFiltered = this.newLineForm.get( 'oldWorkcenter').valueChanges .startWith(null) .map(val => this.displayFn(val)) .map(name => this .filterItems(name)); – fastAsTortoise