Решение ngFor для 4 различных вариантов - PullRequest
Новая
       5

Решение ngFor для 4 различных вариантов

0 голосов
/ 05 июня 2018

У меня есть 4 кнопки, которые разделены попарно (A1, A2 и B1, B2).

У меня также есть 4 разных абзаца, которые я хочу показать на основе вариантов отмеченных кнопок ... 4 вариантадолжно быть A1B1, A1B2, A2B1 и A2B2 ...

Мне удалось сделать plunker , чтобы показать какой-то базовый принцип, но до сих пор не найдено решение о том, как я могу сделать ngFor для загрузкитолько один соответствующий абзац к комбинации кнопок, поэтому, если я нажму кнопку А1 и кнопку В2, будет показан только абзац для этого кода.

1 Ответ

0 голосов
/ 05 июня 2018

Вам нужно использовать * 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 и жестких кодов .. дайте мне знать, если вы предпочитаете это решение

Обновленный рабочий код: https://stackblitz.com/edit/ngfor-example-ntnm1x

...