如何为ngFor创建的每个项目创建材料弹出窗口?

时间:2019-01-31 21:57:53

标签: dart angular-material angular-dart

我正在尝试创建一个材料弹出选择,允许我为我拥有的每个材料芯片更改一个变量。我的弹出窗口/素材选择没有被复制。而是,每个芯片上都有相同的弹出窗口。 statusDropdowns包含“新建”,“进行中”,“保留”,“完成”和“已取消”。

我尝试过更改弹出窗口和material-select-item的不同部分。我还在材料选择上尝试了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相对应。

0 个答案:

没有答案