如何在Angular中使用ngFor从JSON数组构造单个字符串

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 Material网格中不起作用）或width: 100%（这会导致项目之间的较大间隙）。

关于如何调整CSS的任何建议？

Answer 1

可能您需要将内容包装在mat-grid-list中，如下所示-

Answer 2

将mat-grid-list环绕在mat-grid-tile周围，您需要使用<span>而不是<div>，因为div是块元素。见下文