Question

我有4个成对分割的按钮（A1，A2和B1，B2）。

我还想根据已检查按钮的变化显示4个不同的段落... 4变化应该是A1B1，A1B2，A2B1和A2B2 ......

我设法让plunker显示一些基本原则，但仍然没有建立解决方案我怎样才能使ngFor只加载一个匹配的段落到按钮组合所以然后，如果我点击按钮A1和按钮B2，它只会显示该代码的段落。

Answer 1

您需要使用* ngIf，并且有一种方法可以在更改任何内容时更新选择，我认为这是您正在寻找的内容，

＆＃13;

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

＆＃13;

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

＆＃13;

您仍然可以在对象中包含段落内容，并使整个结构像地图一样。这样我们就不需要使用多个* ngIf和hardcodings ..让我知道你是否更喜欢这个解决方案

更新了工作代码：https://stackblitz.com/edit/ngfor-example-ntnm1x

ng适用于4种不同的解决方案

1 个答案: