Question

我有一个结构，其中有一个父组件，它会加载一个数组，例如从1到5。通过这个数组，我循环并通过传递参数来创建新的子组件。每个孩子都通过@Input获取此参数并进行处理，然后根据结果需要隐藏此组件。

我尝试使用@Output，但由于我为所有子代设置了相同的输出，因此，如果应该隐藏的返回值将隐藏所有子代。

按照我的代码

爸爸

<ng-container *ngFor="let item of listtest">
    <app-split-grouping [idWallet]="item" [document]="document" 
      (hideChildren)="hidecomponent = true"
      *ngIf="hidecomponent" class="col-5 pt-4 pb-4 alert alert-secondary"> 
    </app-split-grouping>
</ng-container>

儿童

export class SplitGroupingComponent implements OnInit {
@Input() idWallet: number;
@Input() document: string;
@Output() hideChildren = new EventEmitter();
.
.
.
if (this.splitGrouping.Status !== 'FOUND') {
    this.hideChildren .emit(this);
}

感谢您的帮助

Answer 1

它隐藏了所有孩子，因为他们共享相同的变量hidecomponent。

如果没有问题，可以修改代码以使用item.hidecomponent。

但是，在组件内部进行处理似乎是一个不好的做法，您可能要考虑提取确定是显示还是隐藏组件并从父级运行它的任何方法：

listtest.forEach(item => myservice.checkItem(item).subscribe(result => {
    item.hidecomponent = result
});

Answer 2

拥有hidecomponent = true时，您总是在制造/提供隐藏组件true。因此，它将永远不会改变。您必须将其与子组件完成处理后返回的当前项目/子组件项目进行比较。 this.hideChildren.emit(this)应该是this.hideChildren.emit(idWallet);，返回的当前内容是告诉爸爸：“不，爸爸，我没有找到它。我现在要向你隐瞒”。

尝试一下：

儿童：

@Output() hideChildren = new EventEmitter<number>()

if (this.splitGrouping.Status !== 'FOUND') {
    this.hideChildren.emit(idWallet);
}

在爸爸的模板中：

<app-split-grouping [idWallet]="item" [document]="document" (hideChildren)="hideComponent($event)" *ngIf="item === hideItem" class="col-5 pt-4 pb-4 alert alert-secondary">
</app-split-grouping>

在爸爸的部分中：

hideItem?: number;

hideComponent(event: number) {
  this.hideItem = event;
}

顺便说一句，如果您不想拥有：

hideItem?: number

您可以开始：

hideItem: number | undefined = undefined;

通过返回输出隐藏组件

2 个答案: