Dart 如何使用document.querySelector使用ngFor更改css类？

所以我已经在这里呆了一段时间，无论我做了多少研究，我都找不到一个可靠的答案。我可能用错误的方式来处理这个问题，所以请随时告诉我，如果我是

我正在制作一个可以显示项目的web应用程序，就像一个项目板。在仪表板上，我显示每个项目的项目和任务。任务显示在一个可单击的材料芯片中，该芯片（完成后）将在单击时允许您更改任务状态。我想让这些芯片根据任务状态的严重性改变颜色，任务使用jsonDecode从Mongo数据库中提取。我还使用Dart服务器向数据库发送命令并接收数据

我尝试设置一个包含if语句的函数来检查任务状态。然后，如果找到它，它应该更改html中css类的颜色，否则，它将转到函数中的下一个状态。我还试图在html中看到所有这些，但ngFor在不创建5个ngIf部分的情况下很难做到这一点，每个任务状态对应一个部分

仪表板组件。省道

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();
  }

Future ngOnInit（）异步{
等待getProjects（）；
等待任务（）；
doTStat（）；
}
设置状态（任务列表）{
如果（taskList.tStatus=='Critical'）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“紫色”
…style.color=“黑色”；
}else if（taskList.tStatus=='On Hold'）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“红色”
…style.color=“黑色”；
}else if（taskList.tStatus==‘进行中’）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“黄色”
…style.color=“黑色”；
}else if（taskList.tStatus=='New'）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“rgb（136225236）”
…style.color=“黑色”；
}else if（taskList.tStatus==“完成”）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“石灰”
…style.color=“黑色”；
}else if（taskList.tStatus==“已取消”）{
document.querySelector（'.taskStat'）
…style.backgroundColor=“黑色”
…style.color=“白色”；
}
}
doTStat（）{
taskList.forEach（（taskList）=>setTStatus（taskList））；
}
void taskDataHandle（字符串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>

{{t.tName}}
{{t.sTech}}
选择项目状态
{{s}

---

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

您不应该使用，也不需要使用

document.querySelector

为什么不改用呢

 ...
 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类

taskStat Critical

，

taskStat OnHold

，使用CSS指定颜色，…？

在我发布这篇文章大约2分钟后，我意识到ngClass可以用括号括起来。我甚至不再尝试使用它，因为我的分区中已经有一个*ngIf，它不允许我使用*ngClass。我刚刚完成测试，实际上我打算删除我的帖子，但我会让它打开，以防其他人像我一样被困在这里。不过现在它工作得很好！我猜只需要把它全部打印出来，就触发了什么。谢谢你的及时回复！只要花点力气写一个好问题，就已经解决了许多问题，而不需要回答：我很高兴听到它对你有用！