Как я могу построить одну строку из JSON Array, используя ngFor в Angular

Question

У меня есть следующие данные:

[
  {
    "name": "AAA",
    "desc": "XXXXXXXX"
  },
  {
    "name": "BBB",
    "desc": "YYYYYYY"
  },
  ...
]

Я пытаюсь отобразить в Интернете как AAA, BBB, ... со следующим кодом:

    <mat-grid-tile colspan="3">
      <div class="text-grid" *ngFor="let value of data; let f=first">
        <div *ngIf="f">
          {{value.name}}
        </div>
        <div *ngIf="!f">
          , {{value.name}}
        </div>
      </div>
    </mat-grid-tile>

Но результат вывода перекрывается , Как достичь ожидаемого результата?

Отредактировано После проверки CSS возникла проблема с CSS:

.text-grid {
    position: absolute;
    left: 5px;
    color: royalblue;
}

Я пытался использовать либо text-align: left (который не работает в пределах Angular Материальная сетка), либо width: 100% (что приводит к большому разрыву между элементами).

Есть предложения о том, как настроить CSS?

Answer 1

Возможно, вам нужно обернуть ваш контент в mat-grid-list, как показано ниже -

<mat-grid-list cols="1">
  <mat-grid-tile>
    <div class="text-grid" *ngFor="let value of data; let last=last">
        {{value.name}} <span *ngIf='!last'>,</span>
    </div>
  </mat-grid-tile>
</mat-grid-list>

Рабочий стекблиц

Дополнительный совет : Не нужно добавлять два *ngIf, вы можете проверить индекс last в *ngFor, как указано выше.

Answer 2

Возможно, попробуйте отформатировать данные перед тем, как поместить их в шаблон

component.ts

formattedDate: string = '';
data: any = [
    {
        "name": "AAA",
        "desc": "XXXXXXXX"
    },
    {
        "name": "BBB",
        "desc": "YYYYYYY"
    }
];

formatDate() {
    this.formattedDate = this.data.map(el => el.name).join(', '); // return 'AAA, BBB'
}

Answer 3

Обтекание mat-grid-list вокруг mat-grid-tile, и вам нужно использовать <span> вместо <div>, поскольку div является блочным элементом. см. ниже

<mat-grid-list cols="1">
<mat-grid-tile>
  <div class="text-grid" *ngFor="let value of data; let f = first">
    <span *ngIf="f">
      {{value.name}}
    </span>
    <span *ngIf="!f">
      , {{value.name}}
    </span>
  </div>
</mat-grid-tile>
</mat-grid-list>