Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.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

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.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
Angular 在mat select中未显示或正在选择选项_Angular_Typescript_Angular Material - Fatal编程技术网

Angular 在mat select中未显示或正在选择选项

Angular 在mat select中未显示或正在选择选项,angular,typescript,angular-material,Angular,Typescript,Angular Material,我想在我的Angular表单中的mat select字段中预选一些选项,因此我在typescript文件中有此代码: selectedApps = []; ngOnInit() { const url = this.baseUrl + `/projects/${this.id}`; this.httpClient.get(url).subscribe((data: Array<any>) => { for (let i=0; i<data[

我想在我的
Angular
表单中的
mat select
字段中预选一些选项,因此我在
typescript
文件中有此代码:

selectedApps = [];
ngOnInit() {
    const url = this.baseUrl + `/projects/${this.id}`;
    this.httpClient.get(url).subscribe((data: Array<any>) => {
        for (let i=0; i<data['results'][0]['apps'].length; i++) {
            this.selectedApps.push(data['results'][0]['apps'][i]['name']);    
        }

    });
}
selectedApps=[];
恩戈尼尼特(){
const url=this.baseUrl+`/projects/${this.id}`;
this.httpClient.get(url).subscribe((数据:数组)=>{
对于(设i=0;i您正在“预选”名称

而您的选项包含ID

<mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option>
{{app.name
}}
为了使其正常工作,
selectedApps
必须保持
mat option[value]
属性上可用的相同值。毕竟,这就是实际的
mat select


老实说,我会将整个
app
作为一个值,因为没有理由威胁它或其他。它会简化很多代码。

我在component.ts文件中添加了一些虚拟数据,我可以在表单字段中看到所选的apps

在模板文件中

<form>
  <div class="col-sm-8 float-left">
    <mat-form-field> <mat-select
      [(value)]="selectedApps" 
      placeholder="Select the associated applications ..."
      multiple (click)="getAppList();"> <mat-option
      *ngFor="let app of appsList" [value]="app.value">{{app.name
    }}</mat-option> </mat-select> </mat-form-field>
  </div>

但这难道不能解决问题吗?
<mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option>
<form>
  <div class="col-sm-8 float-left">
    <mat-form-field> <mat-select
      [(value)]="selectedApps" 
      placeholder="Select the associated applications ..."
      multiple (click)="getAppList();"> <mat-option
      *ngFor="let app of appsList" [value]="app.value">{{app.name
    }}</mat-option> </mat-select> </mat-form-field>
  </div>
export class SelectFormExample {
selectedApps: string;
 appsList = [
 {value: 'app_1', results: 'App1-result', name: 'APP 1'},
{value: 'app_2', results: 'App2-result', name: 'APP 2'},
{value: 'app_3', results: 'App3-result', name: 'APP 3'}
];

getAppList(){
    console.log('getAppList');
  }