Question

我有一个非常奇怪的问题。我在我的模板代码中使用了一个简单的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>

Answer 1

好吧，我知道发生了什么事。在我的bb-card-image组件中，我动态地为样式添加阴影和某些东西。事实证明，通过修改容纳该md-icon的容器的innerHTML，它以某种方式丢失了标记内的值。我仍然不确定自从我在代码中执行此操作后可能的情况如何：

＆＃13;

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

＆＃13;

Angular 4 ngFor变量在某个子组件内部不可见

1 个答案: