ngIf 不在大子指令中工作

Question

在我使用指令创建孙子之前，一切正常，直到我在grandchild 组件中使用指令*ngIf，*ngIf 不起作用。

我试图找到解决方案，但没有找到任何解决这个问题的方法。

这是我的孙子指令指令

@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

你的孙子是一个指令，但你把它当作一个组件来使用。您应该将您的孙子创建为一个组件。