我有一个卡片列表组件,应该显示卡组件或卡片编辑组件的元素,具体取决于{{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>
答案 0 :(得分: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>
这允许组件只需要担心一张访客卡而不是整个清单。
答案 1 :(得分:0)
你采取了错误的方式:给你的条件一个变量,让我们说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);
}
}
答案 2 :(得分:0)
我添加了另一个答案,因为这是另一个解决方案。
您可以做的是进行双向绑定,例如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>