angular - Mat-autocomplete - แสดงชื่อแต่บันทึกค่า User ID

ฉันกำลังพยายามทำระบบเติมข้อความอัตโนมัติ อย่างไรก็ตามฉันต้องการบันทึก ID ผู้ใช้ที่ถูกเลือกในฐานข้อมูล

นั่นคือ ในการเติมข้อความอัตโนมัติ ฉันต้องการให้ชื่อผู้ใช้ปรากฏเพื่อเลือก แต่ค่าที่ส่งกลับฉันไม่ต้องการชื่อ แต่ต้องการ ID ของมัน

ฉันคิดว่าปัญหาของฉันอยู่ในบรรทัดนี้:

this.userService.getUsers().subscribe(
      (val: any[]) =>{
        this.allFruits = val.map(user => user.username);
        this.fruitCtrl.setValue(null); 
      } 
    )

โค้ดของฉัน --Stackblitz

สแต็กบลิทซ์

ส่วนประกอบ

constructor(private userService: UserService) {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (val: any[]) =>{
        this.allFruits = val.map(user => user.username);
        this.fruitCtrl.setValue(null); 
      } 
    )
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }

เอชทีเอ็มแอล

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

คำตอบ #1

คุณแน่นอนต้องการให้มีสตรีมของวัตถุ ไม่ใช่สตริงใน this.filteredFruits กับฐานรหัสปัจจุบัน คุณจะต้องหาค่า id ของสตริงที่เลือก ซึ่งฟังดูเปราะบาง - ควรอย่าแยกคู่ key/value ออกจากกัน มิฉะนั้นอาจเจอบั๊กเมื่อใช้ id ผิด

this.allFruits = val;

จากนั้นเปลี่ยนฟังก์ชัน this._filter ให้กรอง object[] แทน string[]:

  private _filter(value: string): any[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.name.toLowerCase().indexOf(filterValue) === 0);
  }

และสำหรับตัวเลือกเสื่อ:

<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit.id">    
  {{fruit.name}}
</mat-option>

ตอนนี้ fruitCtrl ควรมี id เป็นค่า