I'm try to create mat-grid-list by loop [object]. e.g object:

[{ "db": {
        "user": "<User>",
        "password": "<Password>",
        "server": "<Server>",
        "database": "<Database>",
        "trustServerCertificate": true,
        "options": {
          "instanceName": "<Instance Name>",
          "port": 111
        }
      }}]

my problem to extract "options" in mat-grid-tile. I'm tried to use ng-template but it did not work I got a empty value

     <mat-card *ngFor="let settings of conf.environment.db | keyvalue">       
       <mat-grid-list cols="2" rowHeight="20px">
        <ng-template [ngIf]="settings.key !== 'options'; else _options">
          <mat-grid-tile id="title">{{settings.key}}</mat-grid-tile>
          <mat-grid-tile id="description">{{settings.value}}</mat-grid-tile>
        </ng-template>
       </mat-grid-list>
     </mat-card>

     <ng-template #_options  ngFor let-opt [ngForOf]="conf.environment.db.options | keyvalue">   
           <mat-grid-tile id="title">{{opt.key}}</mat-grid-tile>
           <mat-grid-tile id="description">{{opt.value}}</mat-grid-tile>
     </ng-template>

Thanks for help.

CodePudding user response：

Try to modify it as follows:

<mat-card *ngFor="let settings of data.db | keyvalue">
  <mat-grid-list *ngIf="settings.key != 'options'; else _opt" cols="2" rowHeight="20px">
    <mat-grid-tile  id="title">{{ settings.key }}</mat-grid-tile>
    <mat-grid-tile id="description">{{ settings.value }}</mat-grid-tile>
  </mat-grid-list>
</mat-card>

<ng-template #_opt>   
 <div *ngFor="let opt of data.db.options | keyvalue">
  <mat-grid-list  cols="2" rowHeight="20px">
    <mat-grid-tile  id="title">{{ opt.key }}</mat-grid-tile>
    <mat-grid-tile id="description">{{ opt.value }}</mat-grid-tile>
  </mat-grid-list>
 </div>
</ng-template>