dart - 如何使用ngFor使用document.querySelector更改CSS类？

Question

因此，我在这里呆了一段时间，无论我做多少研究，都找不到可靠的答案。我可能以错误的方式处理此问题，所以请随时告诉我我是否愿意。

我正在制作一个将显示项目的Web应用程序，例如项目板。在仪表板上，我正在显示项目和每个项目的任务。任务显示在可点击的 Material 芯片中(完成后)，单击该芯片后，您可以更改任务状态。我希望这些芯片根据任务状态的严重性来更改颜色，该任务是使用jsonDecode从Mongo数据库中提取的。我还使用Dart服务器将命令发送到数据库并接收数据。

我尝试设置一个包含if语句的函数来检查任务状态。然后，如果找到它，则应该更改html中css类的颜色，否则，它将继续前进到函数中的下一个状态。我也尝试在html中看到所有这些内容，但是ngFor会在没有创建5 ngIf节的情况下使这一点变得困难，每个任务状态一个。

dashboard_component.dart

Future<void> ngOnInit() async {
    await getProjects();
    await getTasks();
    doTStat();
  }


  setTStatus(taskList) {
      if (taskList.tStatus == 'Critical') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "purple"
          ..style.color = "black";
      } else if (taskList.tStatus =='On Hold') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "red"
          ..style.color = "black";
      } else if (taskList.tStatus == 'In Progress'){
          document.querySelector('.taskStat')
          ..style.backgroundColor = "yellow"
          ..style.color = "black";
      } else if (taskList.tStatus == 'New') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "rgb(136, 225, 236)"
          ..style.color = "black";
      } else if (taskList.tStatus == 'Complete') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "lime"
          ..style.color = "black";
      } else if (taskList.tStatus == 'Canceled') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "black"
          ..style.color = "white";
    }
  }

  doTStat() {
    taskList.forEach((taskList) => setTStatus(taskList)); 
  }

  void taskDataHandle(String jsonString) {
    taskList = (jsonDecode(jsonString) as List).map((e) => new
    Tasks.fromJson(e)).toList();
  }

dashboard_component.html

<material-chips class="clickable chips" *ngFor="let t of taskList">
                <material-chip
                *ngIf="t.joinID == p.id"
                [removable]="false"
                popupSource
                #source="popupSource"
                buttonDecorator
                (trigger)="showPopup(source)"
                materialTooltip="{{t.genNotes}}"
                class="taskStat"
                (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>

我希望根据芯片显示的任务状态更改芯片颜色。有一个更好的方法吗？

Answer 1

您不应该在Angular中使用并且完全不需要document.querySelector。

为什么不使用use代替

 ...
 class="taskStat" 
 [ngClass]="{'taskStat-Critical': t.tStatus == 'Critical', 'taskStat-OnHold': t.tStatus == 'On Hold', 'taskStat-InProgress': t.tStatus == 'In Progress', 'taskStat-New': t.tStatus == 'New', 'taskStat-Complete': t.tStatus == 'Complete', 'taskStat-Canceled': t.tStatus == 'Canceled'}"
 (click)="onTaskSelect(t)"

然后使用CSS根据所应用的CSS类 taskStat-Critical， taskStat-OnHold，...？分配颜色。