Angular 获取角度自动完成值

因此，我遵循了它的角度材料自动完成的角度文档，但是为了从自动完成中获得选择的值，我已经奋斗了两天。基本上，我希望Autocomplete显示人类的姓名，但选项的值必须是整个人类对象。然后，我只想在选择人员时对SelectedHuman进行console.log操作。任何解决办法都可能奏效

下面是一个演示项目：

以下是html文件：

<input [(ngModel)]="SelectedHuman" (change)="OnHumanSelected()" matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
  <mat-option *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

{{human.Name}-{{human.Name}

以下是ts文件： 导出类AutoCompletedDisplayExample在NIT上实现{

  SelectedHuman: Human;
  MyControl = new FormControl();
  arrFilteredHumans: Observable<Human[]>;
  arrHumans = [
    new Human('1K59DN3', 27, 'John', 'Smith'),
    new Human('9VH23JS', 67, 'William', 'Shakespeare'),
    new Human('0QNF1HJ', 44, 'Elon', 'Musk')
  ];

  ngOnInit() {
    this.arrFilteredHumans = this.MyControl.valueChanges.pipe(
      startWith(''),
      map((val) => this.filter(val))
    );
  }

  filter(val: any): Human[] {
    return this.arrHumans.filter((item: any) => {
      //If the user selects an option, the value becomes a Human object,
      //therefore we need to reset the val for the filter because an
      //object cannot be used in this toLowerCase filter
      if (typeof val === 'object') { val = "" };
      const TempString = item.Name + ' - ' + item.Surname;
      return TempString.toLowerCase().includes(val.toLowerCase());
    });
  }

  AutoCompleteDisplay(item: any): string {
    if (item == undefined) { return }
    return item.Name + ' - ' + item.Surname;
  }

  OnHumanSelected() {
    console.log(this.MyControl); //This has the correct data
    console.log(this.MyControl.value); //Why is this different than the above result?
    console.log(this.SelectedHuman); //I want this to log the Selected Human Object
  }
}

export class Human {
  constructor(
    public ID: string,
    public Age: number,
    public Name: string,
    public Surname: string
  ) { }
}

SelectedHuman:Human；
MyControl=newformcontrol（）；
arrFilteredHumans：可观察的；
ARR人类=[
新人类（'1K59DN3'，27，'John'，'Smith'），
新人类（'9VH23JS'，67，'William'，'Shakespeare'），
新人类（'0QNF1HJ'，44，'Elon'，'Musk'）
];
恩戈尼尼特（）{
this.arrFilteredHumans=this.MyControl.valueChanges.pipe(
startWith（“”），
映射（（val）=>this.filter（val））
);
}
过滤器（val:any）：人[]{
返回此.arrHumans.filter（（项：any）=>{
//如果用户选择一个选项，则该值将成为人类对象，
//因此，我们需要重置筛选器的val，因为
//对象不能在此toLowerCase筛选器中使用
如果（typeof val==='object'）{val=”“}；
const TempString=item.Name+'-'+item.姓氏；
返回TempString.toLowerCase（）.includes（val.toLowerCase（））；
});
}
自动完成显示（项目：任意）：字符串{
如果（item==未定义）{return}
返回项。名称+'-'+项。姓氏；
}
OnHumanSelected（）{
console.log（this.MyControl）；//这有正确的数据
console.log（this.MyControl.value）；//为什么这与上面的结果不同？
console.log（this.SelectedHuman）；//我想让它记录所选的人类对象
}
}
出口级人员{
建造师(
公共ID:string，
公众年龄：人数，
公共名称：string，
公众姓氏：string
) { }
}

所以这似乎解决了问题。将OnHumanSelected（）函数置于mat选项的（单击）事件上：

  <mat-option  (click)="OnHumanSelected()" *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>

  ####################

  OnHumanSelected() {
    console.log(this.SelectedHuman);
  }

{{human.Name}-{{human.Name}
####################
OnHumanSelected（）{
console.log（this.SelectedHuman）；
}

所以这似乎解决了问题。将OnHumanSelected（）函数置于mat选项的（单击）事件上：

  <mat-option  (click)="OnHumanSelected()" *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>

  ####################

  OnHumanSelected() {
    console.log(this.SelectedHuman);
  }

{{human.Name}-{{human.Name}
####################
OnHumanSelected（）{
console.log（this.SelectedHuman）；
}

这是一个例子

这里是代码

   OnHumanSelected(SelectedHuman) {
    console.log(SelectedHuman); // get from view
    console.log(this.SelectedHuman); // get from variable
  }

  <input [(ngModel)]="SelectedHuman"  matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
    <mat-option (click)="OnHumanSelected(SelectedHuman)"  *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

HTML文件

   OnHumanSelected(SelectedHuman) {
    console.log(SelectedHuman); // get from view
    console.log(this.SelectedHuman); // get from variable
  }

  <input [(ngModel)]="SelectedHuman"  matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
    <mat-option (click)="OnHumanSelected(SelectedHuman)"  *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

{{human.Name}-{{human.Name}

这是一个例子

这里是代码

   OnHumanSelected(SelectedHuman) {
    console.log(SelectedHuman); // get from view
    console.log(this.SelectedHuman); // get from variable
  }

  <input [(ngModel)]="SelectedHuman"  matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
    <mat-option (click)="OnHumanSelected(SelectedHuman)"  *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

HTML文件

   OnHumanSelected(SelectedHuman) {
    console.log(SelectedHuman); // get from view
    console.log(this.SelectedHuman); // get from variable
  }

  <input [(ngModel)]="SelectedHuman"  matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
    <mat-option (click)="OnHumanSelected(SelectedHuman)"  *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

{{human.Name}-{{human.Name}

单击事件和选择事件是两个不同的事件。您想要的是选定的事件，而不是单击事件，因此请使用

MatAutocomplete

中的

选项selected

：

<mat-autocomplete 
    #auto="matAutocomplete" 
    [displayWith]="AutoCompleteDisplay"
    (optionSelected)="OnHumanSelected($event.option)">

    <!-- 
    ... 
    -->

</mat-autocomplete>

OnHumanSelected(option: MatOption) {
    console.log(option.value);
}

OnHumanSelected（选项：MatOption）{
console.log（option.value）；
}

单击事件和选择事件是两个不同的事件。您想要的是选定的事件，而不是单击事件，因此请使用

MatAutocomplete

中的

选项selected

：

<mat-autocomplete 
    #auto="matAutocomplete" 
    [displayWith]="AutoCompleteDisplay"
    (optionSelected)="OnHumanSelected($event.option)">

    <!-- 
    ... 
    -->

</mat-autocomplete>

OnHumanSelected(option: MatOption) {
    console.log(option.value);
}

OnHumanSelected（选项：MatOption）{
console.log（option.value）；
}