如何在Angular中使用ng-repeat在p标签内循环遍历字符串数组

首先需要注意：你现有代码中的*ngIf是Angular 2+版本的语法，该版本不存在ng-repeat指令，对应的循环指令为*ngFor。如果是AngularJS 1.x版本才使用ng-repeat指令，两种场景的实现方案如下：

场景1：Angular 2+版本实现 #

需求1：每个数组元素单独渲染为一个p标签 #

Angular不支持在同一个元素上同时使用多个结构指令，因此用ng-container做逻辑包裹（不会生成额外DOM节点）：

<ng-container *ngIf="detailMessageMultilines">
  <p *ngFor="let line of detailMessageMultilines">
    {{line}}
  </p>
</ng-container>

如果需要同时排除空数组的渲染场景，把判断条件修改为*ngIf="detailMessageMultilines?.length > 0"即可。

需求2：所有数组内容放在同一个p标签内 #

以下实现会在每一行内容后添加换行，最后一行不添加：

<p *ngIf="detailMessageMultilines">
  <ng-container *ngFor="let line of detailMessageMultilines; let isLast = last">
    {{line}}<ng-container *ngIf="!isLast"><br></ng-container>
  </ng-container>
</p>

场景2：AngularJS 1.x版本（使用ng-repeat）实现 #

需求1：每个数组元素单独渲染为一个p标签 #

<p ng-if="detailMessageMultilines" ng-repeat="line in detailMessageMultilines">
  {{line}}
</p>

需求2：所有数组内容放在同一个p标签内 #

<p ng-if="detailMessageMultilines">
  <span ng-repeat="line in detailMessageMultilines">
    {{line}}<br ng-if="!$last">
  </span>
</p>

内容的提问来源于stack exchange，提问作者iMSn20