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

我有以下数据：

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

我试图在web上显示为

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>

我尝试使用

text align:left

（在角度材质网格中不起作用）或

width:100%

（这会导致项目之间出现较大的间隙）

---

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

围绕

mat grid tile

包裹

mat grid list

，并且您需要使用

而不是

，因为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>

{{value.name}
，{{value.name}

您可能需要将内容包装在

网格列表中，如下所示-

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


{{value.name}}，


额外提示：无需添加两个
*ngIf
，您可以如上所述检查
*ngFor
中的
last
索引。
在将数据放入模板之前，可能会尝试格式化数据

组件技术

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

您使用
ngIf
的目的是什么？
ngIf
用于在名称前添加逗号，如果它不是第一项，我想您不需要检查，因为它将从第一个对象本身运行，所以您需要在
{value.name}之后附加
，
，即使在使用
之后，输出的值仍然重叠。你能在stackblitz上重现这个吗？它看起来像是一些CSS问题，而不是代码。你是对的！我从
中删除类
文本网格
，它们不再重叠。我会看看我的CSS。
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'
}