角度 ng如果使用条件的 @Output（） 结果

Question

我有一个卡片列表组件，它应该显示卡片组件或卡片编辑组件的元素，具体取决于 wasEditClicked 上的卡片组件是真还是假。

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

<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 布尔值。

我的卡组件（与上面显示的卡列表组件不同）如下所示：

export class GuestCardComponent implements OnInit {

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

  constructor() { }

  ngOnInit() {
  }

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

}

Answer 1

我添加了另一个答案，因为这是另一个解决方案。

你能做的就是做一个双向绑定，比如ngModel。

以下是您的操作方法：

js prettyprint-override">let emitValue = false;
@Output() public emitChange = new EventEmitter<boolean>();

@Input() get emit() { return this.emitValue; }
set emit(value: boolean) { this.emitValue = value; this.emitChange.emit(this.emitValue); }

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

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

Answer 2

你走错了路：给你的条件一个变量，比如说 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);
  }

}

Answer 3

我将创建一个“包装器”组件，用于保存卡片的编辑和只读版本。它将具有访问者的输入、编辑点击的属性和一个名为函数的函数，该函数接受布尔值。在函数中，您将编辑点击设置为真/假。所以像这样的事情：

<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>

这使得一个组件只需要考虑一张访客卡，而不是整个列表。