如何将 NG-TEMPLATE、NG-FOR、NG-IF 与子组件组合在一起

Question

我有以下情况...

// child-component.ts
@Input() attrOne: any;
@Input() attrTwo: any;
isVisible: boolean = true;
HideThis(){
this.isVisible = false;
}

和。。。

// child-component.html
<div *ngIf="isVisible">
<!-- nested content -->
<span (click)="HideThis()">Hide This</span>
</div>

然后。。。

// parent-component.html
// listData comes from server as is...
<ng-container *ngFor="let item of listData">
<child-component [attrOne]="item.propOne" [attrTwo]="item.propTwo"></child-component>
</ng-container>

子组件，我们称之为子组件，嵌入在父组件中。我在父组件上使用 ng-for 来列出使用嵌入式子组件的数据数组......我需要能够在任何嵌入的子组件上执行(单击(="HideThis((">...我的尝试(如上所述(隐藏了内容，但是当我单击 HideThis(( 时，在父组件的 DOM 中留下了一个空白的子组件元素。我希望完全删除或避免列出相应的子组件。

我不能使用 listData[n].item.prop 这样的属性来做 *ngIf 测试。 listData 来自远程服务器。有没有办法避免使用类似@Output() onHidden: EventEmitter<any> = new EventEmitter<any>();

我已经尝试了ng模板和ng内容，但无济于事。最好的方法是什么？

Answer 1

您可以将 *ngFor 放在组件本身上，而无需额外的包装器：

<child-component *ngFor="let item of listData" [attrOne]="item.propOne" [attrTwo]="item.propTwo"></child-component>

我不能使用像listData[n].item.prop这样的属性

实际上你可以做：

<child-component *ngFor="let item of listData" [attrOne]="item.propOne; let i = index" [attrTwo]="item.propTwo"></child-component>

但不要认为这是正确的方法

如果您需要更详细的答案 - 请为其创建一个堆栈闪电战沙盒

Answer 2

如果需要从 DOM 中完全删除<app-child>选择器，则条件应包含在父组件中，而不是子组件中。

parent.component.ts

listData: {propOne: string, propTwo: string, visible: boolean}[];
ngOnInit() {
this.someService.getList().pipe(
map(response => { response.forEach(item => item['visible'] = true })
).subscribe(
list => { this.listData = list },
error => { }
);
}

parent.component.html

<ng-container *ngIf="listData">
<ng-container *ngFor="let item of listData">
<ng-container *ngIf="item.visible">
<app-child [attrOne]="item.propOne" [attrTwo]="item.propTwo"></app-child>
<button (mouseup)="item.visible = false">Click here to hide</button>
<ng-container>
</ng-container>
</ng-container>

现在，子组件中不再需要isVisible属性。

当然，如果单击子组件，这将永远隐藏子组件。您可以通过将按钮向外移动一级来将其更改为切换函数，然后在回调中切换标志而不是将其设置为false。

<ng-container *ngIf="listData">
<ng-container *ngFor="let item of listData">
<ng-container *ngIf="item.visible">
<app-child [attrOne]="item.propOne" [attrTwo]="item.propTwo"></app-child>
<ng-container>
<button (mouseup)="item.visible = !item.visible">Click here to hide</button>
</ng-container>
</ng-container>