如何在 mat-select Angular Material 上显示预览值

Question

我正在尝试创建一个编译表，我必须在其中从 mat-select 中选择一个值。

在第三列我有一个我可以选择的值列表

lunch:infoLunch[]=[{id_lunch: '',desc_lunch:''},
                     {id_lunch: 'TP1',desc_lunch:'Normale'},
                     {id_lunch: 'TP2',desc_lunch:'Senza carne'},
                     {id_lunch: 'TP3',desc_lunch:'Senza carne di maiale'},
                     {id_lunch: '14/1020',desc_lunch:'14/1020'}
  ];

这是专栏的html代码

<ng-container matColumnDef="pasto">
      <th mat-header-cell *matHeaderCellDef> Descrizione Pasto</th>
      <td mat-cell  *matCellDef="let studente">
        <mat-form-field>
          <mat-select [disabled]="studente.isAbsent || studente.isGuest" (selectionChange)="checkCheckPastovalue($event, studente)" panelClass="example-panel-dark-blue">
            <mat-option *ngFor="let cust of lunch"
                        [value]="cust"> {{studente.isAbsent || studente.isGuest ?  '': cust.desc_lunch}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </ng-container>

我有一个来自 db 的外部 json 值设置或空值

    {
                      "idStudenti": 1,
                        "nome": "John",
                        "cognome": "Doe",
                        "isChecked": true,
                        "CodLunch": "TP1",
                        "DescLunch": "Normale",
                        "isGuest": false,
                        "hostSchool": "",
                        "isAbsent": false
                    },
                    {
                        "idStudenti": 2,
                        "nome": "Giada",
                        "cognome": "Doe",
                        "isChecked": false,
                        "CodLunch": "",
                        "DescLunch": "",
                        "isGuest": false,
                        "hostSchool": "",
                        "isAbsent": false
                    }

如何在 mat-select 上显示 json 的当前值？

Answer 1

你有两种选择：

• 使用expandable rows在表格中显示所选信息

--- 或 ---

• 拥有一个属性并绑定它，这样就可以在表格外以漂亮的格式显示信息