Angular TestComponent组件实现问题修正请求：ngIf判断、DOM元素移除及文本奇偶长度颜色设置

我来帮你把这些问题都搞定，咱们先梳理原代码里的几个关键错误，再给出完整的修正版本：

原代码里的核心问题 #

• 组件选择器不符合要求：你要的是test-component，但原代码写的是app-test-component
• 模板错误嵌套了<test-component>标签：组件模板是自身的渲染内容，不需要嵌套自己，否则会触发无限递归渲染
• *ngIf判断逻辑错误：不仅要判断inputData是否存在，还要判断数组是否为空；而且语法上*ngIf的表达式必须用双引号包裹
• 混淆了「数组元素位置的奇偶」和「字符串长度的奇偶」：你需要的是根据字符串自身长度来设置颜色，不是元素在数组里的位置
• 样式部分的拼写错误：style应该是复数styles，颜色值read→red、gren→green，而且需求是修改文本颜色而非背景色
• ngClass的语法位置错误：应该绑定在ngFor循环的div上，且逻辑要基于字符串长度

修正后的完整代码 #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'test-component', // 符合要求的组件选择器
  template: `
    <!-- 无数据时显示，有数据时自动从DOM移除 -->
    <div id="noData" *ngIf="!inputData || inputData.length === 0">No data</div>

    <!-- 有数据时渲染列表容器 -->
    <div id="dataList" *ngIf="inputData && inputData.length > 0">
      <!-- 循环渲染数组元素，根据字符串长度动态设置颜色 -->
      <div 
        *ngFor="let item of inputData"
        [ngClass]="{ 'text-red': item.length % 2 !== 0, 'text-green': item.length % 2 === 0 }"
      >
        {{ item }}
      </div>
    </div>
  `,
  styles: [
    `
      .text-red { color: red; }
      .text-green { color: green; }
    `
  ]
})
export class TestComponent {
  // 初始化空数组，避免未传值时出现undefined的问题
  @Input() inputData: Array<string> = [];
}

关键部分说明 #

1. 无数据判断与DOM移除
   用*ngIf="!inputData || inputData.length === 0"控制noData的显示：

   • 当inputData未传入（undefined）或数组为空时，这个div会渲染在DOM中
   • 当有有效数据时，Angular会直接将这个div从DOM中移除，而非隐藏

2. 字符串长度的奇偶判断
   通过item.length % 2 !== 0判断字符串长度为奇数，item.length % 2 === 0判断偶数，再用ngClass动态绑定对应的样式类，精准实现文本颜色的变化逻辑。

3. 模板结构优化
   去掉了错误的组件嵌套，将dataList和noData放在同一层级，通过各自的*ngIf控制显示逻辑，确保同一时间只有一个容器会被渲染到页面上。

内容的提问来源于stack exchange，提问作者Jhon Hernández