javascript - 将逗号添加到 NgFor 列表的最佳方法

Question

我已经看到了一些可能的解决方案。解决方案 1 工作正常，但使用解决方案 2 它只是重复我的数组 5 次。

test: string[]= ['apple', 'banna', 'mango', 'orange', 'pear'];

HTML 解决方案 1:

<p *ngFor="let x of test; let isLast=last">{{test}} {{isLast ? '' : ','}}</p>

HTML 解决方案 2

<p *ngFor="let x of test">{{test.join(",")}}</p>

也尝试过这个，但没有成功:

// <p *ngFor="let x of test">{{x.join(",")}}</p>

Answer 1

有两种方法可以实现此目的:使用数组的 join() 方法并使用 *ngFor 如下

app.component.html

<h1>String Array Demo</h1>

<h2>Solution 1 - Using  <code> join() </code> method</h2>

<p>{{test.join(', ')}}</p>

<h2>Solution 2 Using <code> *ngFor </code> directive </h2>

<span *ngFor="let x of test; let i = index">
  {{x}} {{i === test.length -1 ? '' : ',&nbsp;' }}
</span>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  test: string[] = ['apple', 'banna', 'mango', 'orange', 'pear'];

}

<强> Demo on stackblitz

希望这会有所帮助!