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

Question

I am trying to create a compilation table where I have to select a value in from a mat-select.

In the third column I have a list of values that I can choose

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'}
  ];

And this is the html code of the column

<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>

I have an external json from db with set or empty values

    {
                      "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
                    }

How can I display the current value of the json on the mat-select?

Answer 1

You got two options for this:

• Use expandable rows to display the selected information within the table

--- OR ---

• Have a property and bind it so that you can display the information outside the table in a nice format