Переменная Angular 4 ngFor не видна внутри определенного подкомпонента

У меня действительно странная проблема. Я использую простой цикл 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>


angular ngfor angular2-template
person Chris Kelly    schedule 22.05.2017    source источник
comment
Почему у вас там [icon]="module.icon"? md-icon должен быть установлен либо svgIcon, либо лигатурой. У вас уже есть набор лигатур, поэтому удалите привязку свойства.   -  person Neil Lunn    schedule 22.05.2017
comment
Мои извинения, я проверял, будет ли там отображаться module.icon, и он попал в эту вырезку. Я удалю это.   -  person Chris Kelly    schedule 22.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Ну я понял в чем дело. Внутри моего компонента bb-card-image я динамически добавлял тени и некоторые вещи для стилей. Оказывается, изменив innerHTML контейнера, содержащего этот md-icon, он каким-то образом потерял значение внутри тега. Я до сих пор не уверен, как это возможно, поскольку я просто делал это в коде:

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

person Chris Kelly    schedule 22.05.2017