Как я могу использовать document.querySelector для изменения класса CSS с помощью ngFor? - PullRequest
Новая
       7

Как я могу использовать document.querySelector для изменения класса CSS с помощью ngFor?

0 голосов
/ 30 января 2019

Так что я застрял здесь на некоторое время, и независимо от того, сколько исследований я провожу, я не могу найти надежного ответа.Возможно, я подхожу к этому неправильным образом, поэтому не стесняйтесь сказать мне, если я.

Я делаю веб-приложение, которое будет отображать проекты, такие как доска объявлений.На панели инструментов я отображаю проект и задачи для каждого проекта.Задачи отображаются в виде фишки с интерактивным материалом, которая (после завершения) позволит вам при щелчке изменить статус задачи.Я бы хотел, чтобы эти микросхемы меняли цвет в зависимости от серьезности статуса задачи, которую он извлекает из базы данных Mongo с помощью jsonDecode.Я также использую сервер Dart для отправки команд в базу данных и получения данных.

Я попытался настроить функцию, которая содержит оператор if для проверки состояния задачи.Затем, если он найден, предполагается изменить цвет класса css в html, иначе он переходит к следующему состоянию в функции.Я также попытался настроить все это в 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>

Я бы хотел, чтобы цвета чипов менялись в зависимости от состояния задачи, которое они отображают.Есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 30 января 2019

Вы не должны использовать и вообще не нужны document.querySelector с Angular.

Почему бы не использовать вместо этого 

 ...
 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, ...?

...