时间戳

首页 > 解决方案 > 在下拉菜单中以角度显示 API 响应

angular - 在下拉菜单中以角度显示 API 响应

问题描述

{{data.role}}
 <mat-form-field>
    <mat-label>Role</mat-label>
       <mat-select >
          <mat-option>selected</mat-option>
          <mat-option *ngFor="let role of roles" [value] = "role">
               {{role.viewValue}}
          </mat-option>
       </mat-select>
  </mat-form-field>

{{data.role}}我提到的是来自 API 的响应。如何在下拉菜单中显示？

标签： angular

解决方案

将您的响应存储在 .ts 文件中的变量中。

rolesdata = []; // define variable

this.rolesdata = response.data.roles; // store response in variable

rolesdata = [{value: 'ADMIN', viewValue: 'Admin'},
         {value: 'STAFF', viewValue: 'Staff'}]; // for e.g. our variable have this data

    <mat-form-field>
        <mat-label>Role</mat-label>
           <mat-select >
              <mat-option>selected</mat-option>
              <mat-option *ngFor="let role of rolesdata " [value] = "{{role.value}}">
                   {{ role.viewValue }}
              </mat-option>
           </mat-select>
      </mat-form-field>

推荐阅读