Angular 4 ngFor变量在某些子组件内不可见答案

【问题标题】：Angular 4 ngFor variable not visible inside certain sub componentAngular 4 ngFor变量在某些子组件内不可见
【发布时间】：2017-10-21 13:33:44
【问题描述】：

我遇到了一个非常奇怪的问题。我在我的模板代码中使用了一个简单的 ngFor 循环，虽然该变量几乎在循环内的任何地方都可见，但由于某种原因，它似乎没有穿透一个子组件。想知道是否有人有任何见解。在我的 bb-card-image 组件内部时，module.icon 变量不可用，但在它之外，甚至在 bb-card-content 内部，我都可以访问所有内容。

<md-grid-tile *ngFor="let module of dash_modules">
    <bb-card *ngIf="_auth.can( module.id, 'read' )" [routerLink]="module.link">
        <md-icon color="accent">{{ module.icon }}</md-icon> <~~~~ This one works.
        <bb-card-image>
            <md-icon color="accent">{{ module.icon }}</md-icon> <~~~~ This module.icon does not work.
        </bb-card-image>
        <bb-card-content>
            <h3 class="center" translate>{{ module.name }}</h3> <~~~~~ This works fine as well even though its within a subcomponent
            <p class="center" translate>
                {{ module.desc }}  <~~~~ Works as well
            </p>
        </bb-card-content>
    </bb-card>
</md-grid-tile>

【问题讨论】：

你为什么有[icon]="module.icon"？ md-icon 应该通过svgIcon 或连字设置。您已经设置了连字，因此请删除属性绑定。
抱歉，我正在测试 module.icon 是否会在那里呈现，并将其放入此剪辑中。我会删除它。

标签： angular angular2-template ngfor

【解决方案1】：

嗯，我知道发生了什么。在我的 bb-card-image 组件中，我为样式动态添加阴影和某些东西。事实证明，通过修改包含该 md 图标的容器的 innerHTML，它以某种方式丢失了标签内的值。我仍然不确定这是怎么可能的，因为我只是在代码中这样做：

img_elem.querySelector( ".card-image" ).innerHTML += `
    <div class="colored-shadow" style="opacity: 1;"></div>
    <div class="ripple-container"></div>
`;

【讨论】：