Angular：动态添加的首个div未加样式类及OnInit数据渲染问题

我来帮你搞定这个小坑——动态渲染出来的第一个<div>没带上指定样式类，大概率是数据初始化、变更检测或者模板细节的问题，咱们一步步排查解决：

1. 先确保数据初始化到位 #

你组件里的tickets数组有没有提前初始化为空数组？如果没初始化，Angular第一次渲染的时候它是undefined，虽然你在ngOnInit里订阅赋值了，但第一个元素的样式绑定可能因为初始状态的异常没正确触发。

修改组件代码，提前初始化：

// user.component.ts
tickets: any[] = []; // 换成你实际的类型，比如 Ticket[]

ngOnInit() {
  this.method = {method:"fetchTickets",user:ntid,ticketId:"12332"};
  this.subscription1 = this.userService.getTickets(this.method).subscribe(ticket =>{
    this.tickets = ticket.data;
  });
}

2. 避免模板变量与数据变量重名 #

你模板里的#tickets和组件里的tickets数组重名了！虽然Angular模板变量是局部作用域，但这种命名冲突很容易导致解析异常，第一个元素的样式问题说不定就和这个有关。赶紧把模板变量改名：

<div class="ruser mb-2" #ticketItem *ngFor="let ticket of tickets" (click)="fetchMsg(ticket)">
  <div class="rname z-depth-2 hoverable {{ticket.yourStyleProperty}}">...</div>
</div>

3. 用[ngClass]替代插值表达式绑定样式类 #

插值表达式{{...}}绑定样式类有时候会因为Angular变更检测的小延迟，导致第一个元素的类没正确渲染。换成[ngClass]会更稳定可靠：

如果是直接绑定属性值作为类名：

<div class="rname z-depth-2 hoverable" [ngClass]="ticket.yourStyleProperty">...</div>

如果是根据条件添加类：

<div class="rname z-depth-2 hoverable" [ngClass]="{'active': ticket.isActive, 'closed': ticket.isClosed}">...</div>

4. 推荐用async管道替代手动订阅 #

手动订阅Observable有时候会错过变更检测时机，用async管道让Angular自动处理订阅、数据更新和变更检测，不仅代码更简洁，还能避免这类渲染问题：

修改组件代码：

// user.component.ts
import { map } from 'rxjs/operators';

tickets$: Observable<any[]>; // 定义为Observable类型

ngOnInit() {
  const method = {method:"fetchTickets",user:ntid,ticketId:"12332"};
  this.tickets$ = this.userService.getTickets(this.method).pipe(
    map(response => response.data) // 提前映射出需要的data字段
  );
}

然后模板里用async管道：

<div class="Users" id="foo">
  <div class="ruser mb-2" *ngFor="let ticket of tickets$ | async" (click)="fetchMsg(ticket)">
    <div class="rname z-depth-2 hoverable" [ngClass]="ticket.yourStyleProperty">...</div>
  </div>
</div>

按上面的步骤排查下来，应该就能解决第一个元素样式类缺失的问题了！

内容的提问来源于stack exchange，提问作者aeshna Kashyap