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

Question

我正在尝试创建一个材料弹出选择，它允许我为我拥有的每个材料芯片更改一个变量。我的弹出/材质选择没有被复制。相反，它是每个芯片上的相同弹出窗口。statusDropdowns 包含 New、In Progress、On Hold、Complete 和 Cancelled。

我尝试更改弹出窗口和材料选择项的不同部分。我还在材料选择上尝试了 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 应该有一个单独的下拉列表。

标签： dartangular-materialangular-dart