Angular 4 ngFür die Variable nicht sichtbar in bestimmten Sub-Komponente

Question

Ich habe ein wirklich seltsames Problem los. Ich verwende eine einfache ngFor-Schleife in meinem Template-Code und während die Variable fast überall in der Schleife sichtbar ist, gibt es eine Subkomponente, die aus irgendeinem Grund nicht zu durchdringen scheint. Ich frage mich, ob jemand einen Einblick hat. In meiner bb-card-image Komponente ist die Variable module.icon nicht verfügbar, aber außerhalb und sogar innerhalb des BB-card-contents kann ich auf alles zugreifen.

<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

Nun, habe ich herausgefunden, was los war. In meiner bb-card-image-Komponente habe ich dynamisch Schatten und bestimmte Dinge für Stile hinzugefügt. Es stellt sich heraus, dass durch das Ändern der innerHTML des Containers, der das md-Icon enthält, der Wert innerhalb des Tags verloren gegangen ist. Ich bin immer noch nicht sicher, wie das möglich ist, da ich gerade dies im Code tun:

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