4种不同类型的ngFor解

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (88)

我有4个按钮,它们成对分开(A1,A2和B1,B2)。

我也有4个不同的段落,我想显示根据不同的检查按钮.4个变化应该是A1B1,A1B2,a2b1和A2B2.

为了展示一些基本原理,但还没有建立解决方案,如何使ngFor只将一个匹配段落加载到按钮组合,因此,如果我单击按钮A1和按钮B2,它将只显示该代码的段落。

提问于
用户回答回答于

你需要用*如果有什么变化的话,我想这就是你要找的,

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>

所属标签

可能回答问题的人

  • 优惠活动秘书

    0 粉丝2 提问7 回答
  • 天使的炫翼

    17 粉丝531 提问6 回答
  • 最爱开车啦

    8 粉丝503 提问6 回答
  • uncle_light

    5 粉丝518 提问5 回答

扫码关注云+社区

领取腾讯云代金券