Question

我的自动完成工作正常，直到我将md-option的[value]更改为对象本身，而不是wc.WorkcenterId。我可以完全过滤列表，但是一旦我点击一个，由于某种原因，filterWorkcenters（）方法被触发并且wc对象被发送到它，崩溃组件，因为我显然不能toLowerCase（） object（它只需要wc.WorkcenterId）。我该怎么做才能解决这个问题？我不能回去，因为我需要我的FormGroup ctrl值来获得正确的对象，而不仅仅是属性。

我的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;
}

Answer 1

我通过更改

修复了它

.map(query => query ? this.filterWorkcenters(query) : this.oldWorkcenters.filter(x => x.PlantNumber === plant.PlantNumber).slice())

到

.map(query => (typeof query === 'string') ? this.filterWorkcenters(query) : this.oldWorkcenters.filter(x => x.PlantNumber === plant.PlantNumber).slice())

当[value]是一个对象时，如何使用Material2自动完成？

1 个答案: