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

Question

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

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

我尝试设置一个包含 if 语句的函数来检查任务状态。然后如果找到了，就应该改变html中cssclass的颜色，否则，它会进入函数中的下一个状态。我也试图在 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

你不应该也不需要 document.querySelector 和 Angular。

为什么不用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 class taskStat-Critical, taskStat-OnHold, ...?[=14 分配颜色=]

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

How do I use document.querySelector to change css class using ngFor?

dart

angular-dart

ngfor