Question

我有一个卡片列表组件，应该显示卡组件或卡片编辑组件的元素，具体取决于{{1}卡组件上的内容为true或false。

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

wasEditClicked

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

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

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

Answer 1

我会创建一个“包装器”组件，它包含卡的编辑和只读版本。它将具有editClicked属性的guest和一个带有布尔值的名为aFunction的函数。在aFunction里面你将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>

这允许组件只需要担心一张访客卡而不是整个清单。

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

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

您可以做的是进行双向绑定，例如ngModel。

以下是您的操作方法：

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>

Angular ngIf使用@Output（）结果作为条件

3 个答案: