Angular中如何在用户匿名或消息数组为空时隐藏后端返回数据

嘿，这两个隐藏条件在Angular里很好实现，给你两种常用的方案参考：

这种方式会先把不符合要求的消息从循环列表里剔除，从源头控制要渲染的内容，性能更优：

<ul>
  <li 
    *ngFor="let message of activeMessages.filter(msg => msg.from_user_name !== 'Anonymous' && msg.messages?.length > 0)"
    (click)="showMessage(message)" 
    [class.activeShow]="message.id == message_id"
  >
    <span>{{message.updated_at | date:'dd.MM.yyyy'}}</span>
    <img style="width: 40px;" [src]="message.from_user_avatar">
    <!-- 你的其他内容 -->
  </li>
</ul>

这里的核心逻辑：

• 用数组的filter方法同时校验两个条件：from_user_name不是"Anonymous"，且消息数组（假设字段是messages）的长度大于0
• 加?.可选链操作符是为了防止消息数组为null/undefined时出现报错

如果需要保留数组里的所有项，但只渲染符合条件的，可以在<li>上叠加*ngIf：

<ul>
  <li 
    *ngFor="let message of activeMessages"
    *ngIf="message.from_user_name !== 'Anonymous' && message.messages?.length > 0"
    (click)="showMessage(message)" 
    [class.activeShow]="message.id == message_id"
  >
    <span>{{message.updated_at | date:'dd.MM.yyyy'}}</span>
    <img style="width: 40px;" [src]="message.from_user_avatar">
    <!-- 你的其他内容 -->
  </li>
</ul>

小提示 #

• 如果你实际数据里的消息数组字段不是messages，记得替换成你真实的字段名（比如contentList、msgItems之类的）
• 如果from_user_name可能为空值（null/undefined），可以把判断改成message.from_user_name && message.from_user_name !== 'Anonymous'，避免空值被误判为符合条件

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