ngЕсли не работает в директиве grand child

Question

До того, как я создал великого ребенка с помощью директивы, и все работает нормально, пока я не использую директиву *ngIf в grandchild компоненте, *ngIf не работает.

Я пытался найти решение, но не нашел ничего для решения этой проблемы.

вот моя директива grand-child-директива

@Directive({
  selector: 'grand-child-directive ',
})
export class gc{
  @Input() name:string;
}

Это мой дочерний компонент ts

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],    
})

export class childComponent implements AfterContentInit 

@ContentChildren(GrandChildDirective) gc:QueryList<GrandChildDirective> ;

  constructor(
  ) {    
  }
  person:any[] = [] 
  ngAfterContentInit() {
      this.gc.toArray().map(item=>{
           this.person.push(item)
      })         
  }
}

вот шаблон внука

<div *ngFor="let prsn of person">
    <a>prsn.name</a>  
</div>

и вот мой код шаблона для вызова child и grandchild

<child-component>
    <grand-child-directive [name]='Ghandy'  *ngIf="showGhandy"></grand-child-directive >
    <grand-child-directive [name]='Ani'  *ngIf="showAni"></grand-child-directive >
    <grand-child-directive [name]='Budi' *ngIf="showBudi"></grand-child-directive >
</child-component>

и вот мой ts

export class testComponent implements OnInit {
    constructor() {             
    }
    showGhandy= true
    showAni= true
    showBudi:boolean = true
    ngOnInit(){
        if(someCondition){
             this.showGhandy = false
        }
        if(someCondition){
             this.showAni= false
        }
        if(someCondition){
             this.showBudi= false
        }   
    }
}

Человек все еще виден, даже если условие ложное

Я что-то упустил?

Буду рад любой помощи.

Answer 1

Ваш внучатый ребенок является директивой, но вы используете его как компонент. Вы должны создать своего великого ребенка как компонент.