角度材料自動完成不保留選擇

Question

我正在嘗試使用 Angular Material 實現一個自動完成輸入字段，它從后端服務器獲取用戶列表。

我已經設法將數據放入自動完成下拉菜單中並且過濾工作正常。 不幸的是，當從下拉列表中選擇一個項目時，它不會顯示在輸入框中。

控制器：

export class SignalMutateComponent implements OnInit {

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  options: User[] = []
  filteredOptions: Observable<User[]>;
  assigneeId = new FormControl();


  private _signalMutate: Signal;
  @Input() set signalMutate(signalMutate: Signal) {
    this._signalMutate = signalMutate
    this.signalForm.patchValue(signalMutate);
    if(signalMutate.labels) {
        this.labels = signalMutate.labels.split(',');
        if(this.labels[0] == "") {this.labels.shift();}
      } else {
        this.labels = [];
      }

  }


get signalMutate() {
  return this._signalMutate
}

  signalForm: FormGroup;
  loading = false;
  submitted = false;
  error: string;
  formSignalValue: Signal;
  labels: [string] = [];

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private authenticationService: AuthenticationService,
    private userService: UserService,
    private signalService: SignalService,
    private snackBar: MatSnackBar

  ) { }

  ngOnInit() {

    this.userService.getFiltered("active")
      .subscribe(users => {this.options = users as User[]; });

    this.signalForm = this.formBuilder.group({
      title: [''],
      description: ['', Validators.required],
      problem: ['', Validators.required],
      value: ['', Validators.required],
      requestor: ['', Validators.required],
      labels: [''],
      id:[''],
      assigneeId: ['']
  });

    this.filteredOptions = this.assigneeId.valueChanges
    .pipe(
      startWith(''),
      map(value => typeof value === 'string' ? value : this.updateAssignee(value)),
      map(fullName => fullName ? this._filter(fullName) : this.options.slice())
    );

  }

  displayFn(user?: User): string | undefined {
    return user ? user.fullname : undefined;
  }

  private _filter(name: any): User[] {
    console.log("name");
    console.log(name);
    const filterValue = name.toLowerCase();
    console.log(filterValue);
    return this.options.filter(option => option.fullName.toLowerCase().indexOf(filterValue) === 0);
  }


  updateAssignee(id: number) {

      console.log('yes: '+id);
      this.signalForm.patchValue({assigneeId: id});

  }
....

HTML文件：

 <div class="uk-width-1-1">
                            <mat-form-field class="formFieldWidth700">
                                    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="assigneeId" [matAutocomplete]="auto" [ngClass]>
                                    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                                      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.id">
                                        {{option.fullName}}
                                      </mat-option>
                                    </mat-autocomplete>
                                  </mat-form-field>
                    </div>

任何幫助，將不勝感激！

謝謝

Answer 1

找到了一個答案：

displayFn(id?: number): string | undefined {
  if (!id) return undefined;

  let index = this.options.findIndex(options => options.id === id);
  return this.options[index].fullName;
}

display 函數需要使用 ids，因為這是在值中選擇的。