Angular 角度ngIf对条件使用@Output（）结果

我有一个卡片列表组件，该组件应显示卡片组件或卡片编辑组件的元素，具体取决于卡片组件上单击的

是否正确

卡片列表组件的模板如下所示：

<div class="loop" *ngFor="let guest of guests">
    <div *ngIf="true;else elseBlock">
        <app-guest-card [guest]="guest"></app-guest-card>
    </div>
    <ng-template #elseBlock>
        <app-guest-card-edit [guest]="guest"></app-guest-card-edit>
    </ng-template>
</div>



我想将ngIf条件绑定到wasEditClicked布尔值

My CardComponent（与上面显示的Card List组件不同）如下所示：

export class GuestCardComponent implements OnInit {

  @Input() public guest: Guest;
  @Output() public wasEditClicked = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  onEdit() {
    this.wasEditClicked.emit(true);
  }

}

导出类GuestCardComponent实现OnInit{
@Input（）公共来宾：来宾；
@Output（）public wasEditClicked=new EventEmitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
onEdit（）{
this.wasEditClicked.emit（true）；
}
}
您采取了错误的方法：为您的条件指定一个变量，比如说
showIt

<div class="loop" *ngFor="let guest of guests">
    <div *ngIf="showIt;else elseBlock">
        <app-guest-card [guest]="guest" (onEdit)="showIt = $event"></app-guest-card>
    </div>
    <ng-template #elseBlock>
        <app-guest-card-edit [guest]="guest" (onEdit)="showIt = $event"></app-guest-card-edit>
    </ng-template>
</div>



然后在单击时设置值：

export class GuestCardComponent implements OnInit {
  @Input() public guest: Guest;
  @Output() public wasEditClicked = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {}

  onEdit() {
    this.wasEditClicked.emit(true);
  }

}

导出类GuestCardComponent实现OnInit{
@Input（）公共来宾：来宾；
@Output（）public wasEditClicked=new EventEmitter（）；
构造函数（）{}
ngOnInit（）{}
onEdit（）{
this.wasEditClicked.emit（true）；
}
}
我将创建一个“包装器”组件，用于保存卡片的编辑和只读版本。它将有一个属性editClicked和一个函数作为guest的输入，该函数名为接受布尔值的函数。在函数中，您将editClicked设置为true/false。比如说：

<div>
 <app-guest-card *ngIf="editClicked;else #elseBlock" [guest]="guest" 
  (wasEditClicked)="aFunction($event)">
 </app-guest-card>
 <ng-template #elseBlock>
    <app-guest-card-edit [guest]="guest"></app-guest-card-edit>
 </ng-template>
</div>



然后在您的顶级组件中

<div *ngFor="let guest of guests">
  <app-wrapper [guest]="guest"></app-wrapper>
</div>



这使得组件只需担心一张客人卡，而不必担心整个列表。
我添加了另一个答案，因为这是另一个解决方案

您可以做的是创建一个双向绑定，例如ngModel

以下是您的操作方法：

let emitValue=false；
@Output（）public emitChange=new EventEmitter（）；
@Input（）get emit（）{返回this.emitValue；}
设置emit（值：布尔）{this.emitValue=value；this.emitChange.emit（this.emitValue）；}

现在在HTML中，您可以做的是

<app-guest-card [guest]="guest" [(emit)]="showIt"></app-guest-card>


您在GuestCard中定义showIt，但尝试在卡列表中的条件中使用它。那不行，我想我的错，我看错了你的代码！我编辑了我的答案，请随意查看您是否在card list component.ts文件中定义了showIt？我的ngIf语句说变量没有定义你甚至不应该定义它，但是如果它给你一个错误，你就在一个组件中定义它，这个组件不是GuestCardComponent，也不起作用。（onEdit）=“showIt=$event”在调用卡组件中的onEdit时似乎没有任何作用，当然，您仍然在*ngIf中使用
showIt
。我无法绑定到'emit'，因为它不是'app guest Card'的已知属性。糟糕，我无法在我的计算机上测试角度代码，我是通过内存编写的。我更新了我的代码，可以随意再看一次，但还是不行。错误：装饰器无法应用于同名的多个get/set访问器。3个中有2个。。。现在应该可以了。如果没有，请参见
ngOnInit（）：void{this.isWasEditClicked=this.wasEditClicked.observer.length>0；}