适用于4种不同变体的ngFor解决方案
适用于4种不同变体的ngFor解决方案
提问于 2018-06-05 07:34:44
我有4个按钮是分开成对的(A1，A2和B1，B2)。
我也有4个不同的段落，我想显示的基础上的变化选中的按钮和变化应该是A1B1，A1B2，A2B1和A2B2…
我设法使plunker显示一些基本的原则，但仍然没有找到解决方案，我如何才能使ngFor加载一个匹配的段落到按钮组合，然后，如果我点击按钮A1和按钮B2，它将只显示该代码的段落。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 07:51:24
你需要使用*ngIf，并且有一个方法可以在任何事情发生变化时更新选择，我想这就是你要找的。
changeA( aValue ) {
this.currentA = aValue;
this.aElem = this.currentA;
this.selectedMonthElem = this.currentA;
this.setSelection();
}
changeB( bValue ) {
this.currentB = bValue;
this.bElem = this.currentB;
this.selectedYearElem = this.currentB;
this.setSelection();
}
setSelection() {
this.selection = this.currentA + this.currentB;
}<button #elem1 value="A1" (click)="changeA(elem1.value)">A1</button>
<button #elem2 value="A2" (click)="changeA(elem2.value)">A2</button>
<button #elem3 value="B1" (click)="changeB(elem3.value)">B1</button>
<button #elem4 value="B2" (click)="changeB(elem4.value)">B2</button>
<p *ngIf="selection == 'A1B1'">Paragraph For A1B1</p>
<p *ngIf="selection == 'A1B2'">Paragraph For A1B2</p>
<p *ngIf="selection == 'A2B1'">Paragraph For A2B1</p>
<p *ngIf="selection == 'A2B2'">Paragraph For A2B2</p>
您仍然可以将段落内容放在对象中，并使整个结构像地图一样。这样我们就不需要使用多个*ngIf和硬编码。如果您更喜欢这个解决方案，请告诉我
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690120
复制相关文章
相似问题