在 Angular 4 中嵌入 *ngFor答案

【问题标题】：Embeeded *ngFor in Angular4在 Angular 4 中嵌入 *ngFor
【发布时间】：2017-11-13 22:34:45
【问题描述】：

您好，我遇到了嵌入 *ngFor 循环的问题。我尝试制作类似的东西。

<div *ngFor = let console of consoles>
...
...
<li *ngFor = let pad of console.pad>
{{pad}
</li>
...
...
</div>

我尝试使用 [innerHtml] 数据绑定并且它可以工作，但我必须让第二个 ngFor 工作，因为它与我的 css 样式配合得很好。

提前谢谢你。

PS。我正在使用 Angular4

【问题讨论】：

有什么问题？ [innerHTML] 与问题有什么关系？
这完全有可能，这里有一个简单的例子：plnkr.co/edit/BjRs1ZhwTiC9drKo7xLn?p=preview
第二个 *ngFor 不起作用，它不显示任何内容，我只是通知 [innerHtml] 起作用了。
@Brocco 为您提供的解决方案正在发挥作用 - 如果该方法对您不起作用，那么可能是 console.pad 为空或根本不是数组

标签： angular angular-cli angular2-directives

【解决方案1】：

您的意思是在 {{pad}} 位置使用 innerHTML 吗？如果是这样，您可以尝试这种方式：

<div *ngFor = let console of consoles>
    ...
    ...
    <li *ngFor = let pad of console.pad>
        <span [innerHTML] = {{pad}}></span>
    </li>
    ...
    ...
</div>

【讨论】：