Как создать всплывающее окно материала для каждого элемента, созданного ngFor? - PullRequest
Новая
       21

Как создать всплывающее окно материала для каждого элемента, созданного ngFor?

0 голосов
/ 01 февраля 2019

Я пытаюсь создать всплывающий выбор материала, который позволит мне изменить переменную для каждого чипа материала, который у меня есть.Мой выбор всплывающих окон / материалов не дублируется.Вместо этого это одно и то же всплывающее окно на каждом чипе.statusDropdowns содержит New, Выполняется, В ожидании, Завершено и Отменено.

Я попытался изменить различные части всплывающего окна и элемент выбора материала.Я также попробовал ngFor для выбора материала, и это только создало выпадающий список 

 <material-chips class="clickable chips" *ngFor="let t of taskList">
                <material-chip
                *ngIf="t.joinID == p.id"
                [ngClass]="{'new': t.tStatus == 'New', 'inprogress': t.tStatus == 'In Progress', 'onhold': t.tStatus == 'On Hold', 'complete': t.tStatus == 'Complete', 'canceled': t.tStatus == 'Canceled'}"
                [removable]="false"
                popupSource
                #source="popupSource"
                buttonDecorator
                (trigger)="showPopup(source)"
                materialTooltip="{{t.genNotes}}"
                (click)="onTaskSelect(t)"
                [class.selected]="p  === taskSelected">
                <div>{{t.tName}}</div>
                <div style="font-size: 10px">{{t.sTech}}</div>
                <material-popup [source]="popSource" 
                                [(visible)]="showingPopup" 
                                [enforceSpaceConstraints]="false" 
                                [preferredPositions]="[position]">
                    <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                        Select Project Status
                    </div>
                  <material-select width="2" class="bordered-list">
                      <material-select-item *ngFor="let s of statusDropdowns"
                                            (trigger)="proto = s"
                                            [selected]="proto == s">{{s}}</material-select-item>
                    </material-select>
                  </material-popup>
              </material-chip>
            </material-chips>

. Должен быть отдельный выпадающий список, соответствующий t.tStatus каждого материала-чипа.

...