Question

使用ng-For和ng-If，我试图显示数组对象看起来像这样recovery code，这就是我所做的enter image description here，这是我到目前为止正在尝试的，

<div class="recovery-code" *ngFor="let x of recoveryCode?.recoveryCodes; let i = index;">
            <b>{{ x }}</b>
            <br *ngIf="i%5 === 0">
</div>

我也有在数组之间做空间的问题，尝试过array.join(", ");但没有用，需要告知我如何解决我的问题，

Answer 1

您的*ngFor在错误的项目上。它是在重复div而不是内容。尝试以下代码，它将更好地工作。它也与您追求的恢复代码相匹配。

ng-container在解决此类问题方面非常有帮助，因为它被设计为不会留下任何DOM跟踪。参见https://angular.io/guide/structural-directives#ng-container-to-the-rescue

<div class="recovery-code">
    <ng-container *ngFor="let x of recoveryCode?.recoveryCodes; let i = index;">
        <br *ngIf="i > 0 && i%5 === 0" />
        <b>{{ x }}</b>&nbsp;
    </ng-container>
</div>

应输出类似于以下内容的内容：

11111 22222 33333 44444 55555
11111 22222 33333 44444 55555
11111 22222 33333 44444 55555

如果在Angular 6中使用模数运算符

1 个答案: