如何在Angular中使用循环动态设置卡片样式及实现条件渲染

以下是针对需求的完整改造步骤：

1. 调整TS文件的items配置 #

首先给每个卡片项增加自定义的背景色、边框色属性，也可以直接配置首行文本避免模板里写判断逻辑，改造后的代码如下：

items: any[]= [
    {
      id : 0,
      title: 'Customer',
      bgColor: '#5f7dff', // 自定义背景色
      borderColor: '#5f7dff', // 自定义边框色
      firstRowLabel: 'Members', // 首行文本
      submodules: {
        members: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
    {
      id: 1,
      title: 'Loans',
      bgColor: '#ff6b6b', // 自定义和其他卡片不同的色值即可
      borderColor: '#ff6b6b',
      firstRowLabel: 'Crop loan admin',
      submodules: {
        Crop_loan_admin: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
    // 剩下的4个卡片同理，每个配置不同的bgColor和borderColor即可，firstRowLabel默认填Members
    {
      id: 2,
      title: 'Insurance',
      bgColor: '#4ecdc4',
      borderColor: '#4ecdc4',
      firstRowLabel: 'Members',
      submodules: {
        members: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
    {
      id: 3,
      title: 'Inventory',
      bgColor: '#95e1d3',
      borderColor: '#95e1d3',
      firstRowLabel: 'Members',
      submodules: {
        members: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
    {
      id: 4,
      title: 'Accounts',
      bgColor: '#f38181',
      borderColor: '#f38181',
      firstRowLabel: 'Members',
      submodules: {
        members: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
    {
      id: 5,
      title: 'Masters',
      bgColor: '#aa96da',
      borderColor: '#aa96da',
      firstRowLabel: 'Members',
      submodules: {
        members: 1000,
        non_members: 200,
        traders: 250,
        employees: 40
      }
    },
  ]

如果不想在TS里加firstRowLabel字段，也可以直接在模板里判断item.title === 'Loans'来显示对应的首行文本。

2. 改造HTML模板 #

需要动态绑定颜色、判断首行文本、控制箭头显隐，同时把写死的子项改成循环生成，改造后的代码如下：

<mat-card class="mat mr-4 ml-5 p-3" fxLayout="column" fxFlex>
    <div fxLayout="row wrap" fxFlex fxLayoutGap="20px">
      <ng-container *ngFor="let item of items">
      <!-- all-items  -->
      <div fxFlex="calc(33.3% - 20px)" class="m-1 pt-3">
        <!-- 绑定动态边框色 -->
        <div fxLayout class="cart-styling" [ngStyle]="{'border-color': item.borderColor}">
          <!-- 绑定动态背景色 -->
          <div class="overview-cart" [ngStyle]="{'background-color': item.bgColor}">
            <div class="ml-5 mt-4 heading-text">{{item?.title}}</div>
          </div>
          <img class="pr-5 mt-4" style="width: 90px;" alt="customer_icon" src="assets/icons/firsticon.png">
        </div>
        <div class="content pl-3">
          <div>
            <!-- 循环子模块，i为索引判断是否为首行 -->
            <ng-container *ngFor="let sub of item.submodules | keyvalue; let i = index">
              <h6 fxLayoutAlign="space-between none" class="pb-1 pt-2 border-bottom" [ngClass]="i===0 ? 'main-line' : 'line'">
                <!-- 首行文本直接读取配置，或者写判断 {{item.title === 'Loans' && i===0 ? 'Crop loan admin' : sub.key.replace('_',' ')}} -->
                {{i===0 ? item.firstRowLabel : sub.key.replace('_',' ')}}
                <!-- 只有首行显示箭头 -->
                <mat-icon *ngIf="i===0" class="arrow-icon">arrow_right_alt</mat-icon>
                <span class="mr-4 value-color">{{sub.value}}</span>
              </h6>
            </ng-container>
            <!-- 补全剩下的空行，和原有效果对齐 -->
            <h6 *ngFor="let empty of [1,2]" fxLayoutAlign="space-between none" class="pb-1 line border-bottom" *ngIf="(item.submodules | keyvalue).length < 6">-</h6>
          </div>
        </div>
      </div>
      <!-- /all-items  -->
    </ng-container>
    </div>
  </mat-card>

3. 调整CSS代码 #

移除原来硬编码的固定颜色即可，其他样式保持不变：

.overview-cart {
  position: relative;
  width: calc(100% - 80px);
  /* 删掉原来的background-color: #5f7dff; 现在是动态绑定 */
  overflow: hidden;

  &:after {
    content: "";
    position: absolute;
    right: -175px;
    top: 0;
    border-width: 153px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #fff;
    z-index: 99;
    transform: rotate(19deg);
  }
}

.cart-styling {
  width: 100%;
  justify-content: center;
  height: 30%;
  /* 删掉原来的border: 1px solid #5f7dff; 现在是动态绑定边框色 */
  border: 1px solid;
}

/* 剩下的CSS代码完全保持原有写法即可 */
.heading-text {
  font-size: 18px;
  font-weight: normal;
  color: #fff;
}

img {
  width: 90px;
  height: min-content;
}

.mat {
  height: auto;
}

.line {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px;
}

.main-line {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px;
  color: #0b4983;
}

.arrow-icon {
  line-height: 0.8;
  color: #0b4983;
  margin-right: 75%;
}

.value-color {
  color: #065a3d;
}

.content {
  background-color: #f7f7f9;
}

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