无需使用多个*ngIf，如何从API获取Reason值并映射显示对应内容？

方法1：静态内容映射（适合简单文本/HTML片段） #

先在组件类中定义Reason值与对应内容的映射对象，把所有匹配逻辑集中在一处，后续新增Reason值只需扩展映射表，无需修改模板：

// 组件.ts文件
export class YourComponent {
  // 从API获取的数据
  apiData: { Reason: string } = /* API返回的数据 */;

  // 定义Reason到内容的映射
  reasonContentMap: Record<string, string> = {
    '逾期未支付': '<table><tr><td>逾期天数</td><td>处理方案</td></tr><tr><td>≤7天</td><td>短信提醒</td></tr></table>',
    '账号异常': '<table><tr><td>异常类型</td><td>处理步骤</td></tr><tr><td>异地登录</td><td>验证手机号</td></tr></table>',
    '资料审核未通过': '<table><tr><td>未通过项</td><td>修改指引</td></tr><tr><td>身份证模糊</td><td>重新拍摄清晰照片</td></tr></table>'
  };
}

模板中直接通过映射取值，配合[innerHtml]渲染HTML表格：

<!-- 组件.html文件 -->
<div [innerHtml]="reasonContentMap[apiData.Reason] || '<p>暂无对应内容</p>'"></div>

注意：如果渲染用户输入的HTML，需要用DomSanitizer处理安全风险，避免XSS攻击。

方法2：动态组件映射（适合复杂交互的内容） #

如果每个Reason对应的内容包含复杂逻辑/交互，建议用动态加载组件的方式：

1. 先为每个Reason创建独立组件（如OverdueComponent、AccountAbnormalComponent）
2. 在组件类中定义组件映射表：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { OverdueComponent } from './overdue.component';
import { AccountAbnormalComponent } from './account-abnormal.component';

export class YourComponent {
  @ViewChild('reasonContentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  apiData: { Reason: string } = /* API返回的数据 */;

  // Reason到组件的映射
  reasonComponentMap = {
    '逾期未支付': OverdueComponent,
    '账号异常': AccountAbnormalComponent
  };

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.renderReasonComponent();
  }

  private renderReasonComponent() {
    this.container.clear(); // 清空容器
    const ComponentClass = this.reasonComponentMap[this.apiData.Reason];
    if (ComponentClass) {
      const factory = this.resolver.resolveComponentFactory(ComponentClass);
      this.container.createComponent(factory);
    } else {
      // 渲染默认提示组件或内容
    }
  }
}

模板中预留组件容器：

<div #reasonContentContainer></div>

方法3：简洁版ngSwitch（替代多*ngIf的轻量方案） #

如果不想用映射，也可以用ngSwitch替代零散的*ngIf，结构更清晰：

<div [ngSwitch]="apiData.Reason">
  <div *ngSwitchCase="'逾期未支付'">
    <table>
      <tr><td>逾期天数</td><td>处理方案</td></tr>
      <tr><td>≤7天</td><td>短信提醒</td></tr>
    </table>
  </div>
  <div *ngSwitchCase="'账号异常'">
    <table>
      <tr><td>异常类型</td><td>处理步骤</td></tr>
      <tr><td>异地登录</td><td>验证手机号</td></tr>
    </table>
  </div>
  <div *ngSwitchDefault>暂无对应内容</div>
</div>

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