将数据从 api 插入到材料选择输入角度

Posted 2023-03-13

【中文标题】将数据从 api 插入到材料选择输入角度

【英文标题】：insert data from api to material select input angular

【发布时间】：2021-09-27 18:53:02

【问题描述】：

我有一个 API 可以返回一些数据，我尝试将这些数据推送到 mat select 输入中，但 select 中的数据不显示，我如何使用这个 api 来做到这一点，我只是尝试使用 for 进行循环，但它也不工作

 TestArrList:any[]=[];
 data1!:any[];
 
 
  ngOnInit(): void 

    let uri = 'APIURL';
    this.http.get(uri).subscribe((data:any) =>   
      this.TestArrList = data
   
for(var i = 0;i < this.TestArrList.length;i++)
       
   for(var j = 0;j < this.TestArrList[i].Items.length;j++)
      this.data1.push(this.TestArrList[i].Items[j].Name);
    console.log(this.TestArrList);
   return this.data1
      

     ); 
     
 
 

<mat-grid-tile [colspan]="fieldColspan">
              <mat-form-field class="form-field" appearance="outline" style="width:20vw">
                <mat-label>Location </mat-label>
                <mat-select placeholder ="Select test"  [formControl]="testControl">
                  <mat-option *ngFor="let item of TestArrList"  [value]="item.name">
                    item.value
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </mat-grid-tile>

我的结果 api，我尝试从每个项目中获取“值”（测试值 1，测试值 2，测试值 3）

[
    
        "Items": [
            
                "Name": "Id",
                "Value": "1"
            ,
            
                "Name": "test",
                "Value": "value1 for test"
            
        ],
        "Value": null
    ,
    
        "Items": [
            

                "Name": "Id",
                "Value": "2"
            ,      
            

                "Name": "test",
                "Value": "value2 for test"
            
        ],
        "Value": null
    ,
    
        "Items": [
            
                "Name": "Id",
                "Value": "3"
            ,
       
            
                "Name": "test",
                "Value": "value3 for test"
            
        ],
        "Value": null
    
]

【参考方案1】：

您将data 分配给TestArrList，但data 的格式不正确。相反，您可以使用reduce

TestArrList: any[] = [];
data1!: any[];


ngOnInit(): void 

    let uri = 'APIURL';
    this.http.get(uri).subscribe((data: any) => 
        this.TestArrList = data.reduce((acc, curr) => 
          acc.push(...curr.Items) // destructuring array
          return acc;
        , []);

      
    

<mat-grid-tile [colspan]="fieldColspan">
  <mat-form-field class="form-field" appearance="outline" style="width:20vw">
    <mat-label>Location </mat-label>
    <mat-select placeholder="Select test" [formControl]="testControl">
      <mat-option *ngFor="let item of TestArrList" [value]="item.name">
        item.value
      </mat-option>
    </mat-select>
  </mat-form-field>
</mat-grid-tile>

【讨论】：

什么是 acc 和 curr？

acc 和 curr 是函数参数。 acc 是累加器，它将收集新值，curr 是迭代中的当前对象

它也不会在输入中显示 item.value

对不起，我的错，它可以工作，但它会在输入中显示带有 id 的值，我只需要 value1 进行测试，value2 进行测试，value3 进行测试