[표시]를 사용하여 표시하는 방법자동 완성 재료2의 경우

[표시]를 사용하여 표시하는 방법자동 완성 재료2의 경우

나는 있습니다.arrayAPI에서 제공되며 Material2#를 사용하고 있습니다.필터링하려면 자동 완성...지금까지는 작동하지만 옵션에 바인딩된 값 대신 다른 속성을 표시하는 데 어려움이 있습니다.

사용해야 하는 건 알지만, 제가 예상한 대로 작동하지 않습니다.다음과 같이 호출되는 함수[displayWith]="displayFn.bind(this)">그냥 나에게 돌려줘요.id어떻게 하면 전체 개체를 얻을 수 있으며 따라서 반환할 수 있습니다.name제 기능으로

그나저나, 여전히 FormControl에서 ID를 바인딩하고 싶습니다.

일부 코드:

구성 요소:

export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: any;

  states = [
    { 
      id: 1,
      name: 'Alabama'
    },
    {
      id: 2,
      name: 'North Dakota'
    },
    {
      id: 3,
      name: 'Mississippi'
    }
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.filterStates('');
  }

  onKeyUp(event: Event): void {
    this.filteredStates = this.filterStates(event.target.value);
  }

  filterStates(val: string): Observable<any> {
    let arr: any[];
    console.log(val)
    if (val) {
      arr = this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name));
    } else {
      arr = this.states;
    }

    // Simulates request
    return Observable.of(arr);
  }

  displayFn(value) {
    // I want to get the full object and display the name
    return value;
  }
}

템플릿:

<md-input-container>
  <input mdInput placeholder="State" (keyup)="onKeyUp($event)" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
  <md-option *ngFor="let state of filteredStates | async" [value]="state.id">
    {{ state.name }}
  </md-option>
</md-autocomplete>

기본적으로 이 질문과 거의 동일합니다(불행히도 두 답변 모두 잘못되었거나 오류가 발생했습니다).

여기 플런커가 있습니다.

전체 개체를 바인딩할 경우md-options그런 다음 옵션에 바인딩해야 합니다.state그리고 돌아옴state.name에displayFn이런 식으로 묶을 필요가 없습니다.this.

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state.name }}
  </md-option>
</md-autocomplete>

displayFn(state) {
  return state.name;
}

디플런커

---

그리고 당신이 오직 묶고 싶다면.state.id로.md-options당신은 루프를 통과해야 합니다.states찾기 위해서.state.name에 기반을 둔state.id그리고 이런 식으로 구속력이 있습니다.this필요합니다.

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
  <md-option *ngFor="let state of filteredStates | async" [value]="state.id">
    {{ state.name }}
  </md-option>
</md-autocomplete>

displayFn(id) {
  if (!id) return '';

  let index = this.states.findIndex(state => state.id === id);
  return this.states[index].name;
}

디플런커

언급URL : https://stackoverflow.com/questions/44234290/how-to-display-using-displaywith-in-autocomplete-material2