Я столкнулся с проблемой при привязке модели к автозаполнению материала.Реализация формы основана на шаблонах

Question

У меня есть объект json в следующей форме:

[{"userAccountId":4544,"userAccountName":"Raj Tera (rtera)"},{"userAccountId":103561,"userAccountName":"Raphael Wouters (rwouters)"}]

Ниже приведен код, который я использовал для отображения и фильтрации учетных записей.

<input class="form-control"  type="text" placeholder="Pick one" matInput [matAutocomplete]="auto" name="tempAccount" [(ngModel)]="tempAccount" (ngModelChange)="filteredUserAccounts = filterUserAccounts(tempAccount)" #tempAccountName=ngModel>
    <mat-autocomplete [displayWith]="displayFn(filteredUserAccounts)" #auto="matAutocomplete">
        <mat-option *ngFor="let x of filteredUserAccounts" [value]="x.userAccountName">
            {{x.userAccountName}}
      </mat-option>
    </mat-autocomplete>

tempAccount Я использую для передачи строки.Так что я могу отфильтровать контент.Вот дополнительный код файла TS:

filterUserAccounts(val: string) {
console.log('tesasfsdasdfasfd!!!!')
if (val) {
  const filterValue = val.toLowerCase();
  var test=this.userAccounts;
  return this.userAccounts.filter(state => state.userAccountName.toLowerCase().includes(filterValue));
}
return this.userAccounts;


}
  displayFn(user?: UserAccount): string | undefined {
    return user ? user.userAccountName : undefined;
  }

В результате я хочу, чтобы моя модель указывала идентификатор, чтобы я мог сохранить его в БД и отобразить имя.Я могу отфильтровать данные, но не могу связать их с моделью.Любая помощь будет высоко ценится.

Answer 1

Попробуйте использовать весь объект в качестве модели, поэтому вместо [value]="x.userAccountName" используйте [value]="x"

Измените функцию фильтра на

filterUserAccounts(user: UserAccount) {
  const val = user.userAccountName;// define val from user
  console.log('tesasfsdasdfasfd!!!!')
  if (val) {
    const filterValue = val.toLowerCase();
    var test=this.userAccounts;
    return this.userAccounts.filter(state => state.userAccountName.toLowerCase().includes(filterValue));
  }
  return this.userAccounts;
}

Тогда, когда вы наблюдаете ngModel tempAccount.userAccountId, следуетдать вам идентификатор и temAccount.userAccountName должен дать вам имя