Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/419.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度6:如何访问mat自动完成下拉列表中的所有选项值?_Javascript_Angular_Angular Material_Angular6 - Fatal编程技术网

Javascript 角度6:如何访问mat自动完成下拉列表中的所有选项值?

Javascript 角度6:如何访问mat自动完成下拉列表中的所有选项值?,javascript,angular,angular-material,angular6,Javascript,Angular,Angular Material,Angular6,鉴于Angular docs中的示例以及下面重复的示例,我如何访问选项中的其余对象数据 例如,如果对象不仅仅是键:值格式的简单名称列表,而是更复杂的内容,例如来自API的数据: dataObject = { name: 'someName', nameID: 'someId', foo: 'bar' } 文档中的示例太简单,没有告诉我如何在输入字段中显示名称,以及如何在ts文件中获得通过API返回PUT请求所需的相应名称ID <form class="example-fo

鉴于Angular docs中的示例以及下面重复的示例,我如何访问
选项中的其余对象数据

例如,如果对象不仅仅是键:值格式的简单名称列表,而是更复杂的内容,例如来自API的数据:

dataObject = {
  name: 'someName',
  nameID: 'someId',
  foo: 'bar'
  }
文档中的示例太简单,没有告诉我如何在输入字段中显示
名称
,以及如何在ts文件中获得通过API返回PUT请求所需的相应
名称ID

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form> 

{{option.name}
组件1.ts:

export class AutocompleteDisplayExample implements OnInit {
  myControl = new FormControl();
  options: User[] = [
    {name: 'Mary'},
    {name: 'Shelley'},
    {name: 'Igor'}
  ];
  filteredOptions: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith<string | User>(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.options.slice())
      );
  }

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

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

    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }
}
导出类自动完成显示示例实现OnInit{
myControl=newformcontrol();
选项:用户[]=[
{姓名:'玛丽'},
{name:'Shelley'},
{name:'Igor'}
];
过滤装置:可观察;
恩戈尼尼特(){
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith(“”),
映射(值=>typeof值=='string'?值:value.name),
映射(name=>name?this.\u过滤器(name):this.options.slice()
);
}
displayFn(用户?:用户):字符串|未定义{
返回用户?user.name:未定义;
}
私有过滤器(名称:字符串):用户[]{
常量filterValue=name.toLowerCase();
返回this.options.filter(option=>option.name.toLowerCase().indexOf(filterValue)==0);
}
}

我想您正在寻找onSelectionChange选项:

您可以简单地将以下内容添加到mat选项:

(onSelectionChange)=“setID(option.nameID)”


每次选择一个值时,都会触发此操作。

My word@Swoox!我想是你干的!谢谢