Angular | 如何使用 ngFor 将样式设置为动态 id？

Question

I have this dynamic id and I need to set a style for it, but how do I do it? Is there a method?

component.html

<tr *ngFor="let channel of channels | slice: (page-1) * pageSize : page * pageSize>
//Other code...
<ng-container *ngFor="let flow of flows">
            <td>
              <div id="flow_{{channel.id}}_{{flow.id}}" style="display:none">
                <i class="bi bi-check-lg"></i>
              </div>
            </td>
 </ng-container>
</tr>

I tried doing this in my component.ts but it doesn't work, it doesn't iterate the values correctly.

 idChannel: any;
  idFlow: any;
  check() {
    this.channelService.getChannels().subscribe(response => {
      this.channels = response.result
      for (var i = 0; i < response.result.length; i++) {
        this.idChannel = response.result[i]['id']
        this.flowService.getFlows().subscribe(response => {
          this.flows = response.result
          for (var i = 0; i < response.result.length; i++) {
            this.idFlow = response.result[i]['id']
          }
          document.getElementById('flow_' + this.idChannel + '_' + this.idFlow).style.display = 'show';
        })
      }
    })
  }

Is there another way to do this? In the component or maybe directly in the html with some directive?

Answer 1

Here's an example from one of my current projects:

<input type="text" 
  [ngClass]="ingredient.drugName == 'DRUG NAME NOT FOUND'
    ? 'text-danger fw-bold'
    : 'drug-found'"
  name="DrugName{{index}}"
      disabled
      pattern="/^(?!.*DRUG NAME NOT FOUND.*).*$/g"
      class="form-control"
      [(ngModel)]="ingredient.drugName">

So what is happening here is that first it checks the conditional:

ingredient.drugName == 'DRUG NAME NOT FOUND'

if ingredient.drugName is DRUG NAME NOT FOUND , it will apply the text-danger and fw-bold css classes to the field, and the text will be red and bold. If not, then it applies the drug class, and it will do some other stuff that isn't important here. The point is that you can conditionally apply css classes to an element.

Here is a good article that goes over not only the simple conditionals, but also goes into some more complex examples: https://www.freecodecamp.org/news/angular-ngclass-example/