Angular自定义组件布尔类型Input绑定异常问题求解

看起来你碰到了Angular中布尔类型输入属性绑定的两个常见问题：模板冗余导致的不必要代码，以及测试中错误地通过DOM属性断言组件输入属性的值。让我们一步步解决：

一、先修复模板的冗余与属性名错误 #

你当前的TodoContainer模板里用了两个*ngIf分别渲染已完成和未完成的todo，这完全是冗余的——直接绑定todo.isCompleted到子组件的输入属性即可，不需要手动写死true/false。另外还发现一个小错误：你的TodoComponent输入属性是uuid，但模板里写的是[id]="todo.id"，这会导致uuid属性根本没绑定上！

修正后的模板：

<ol>
  <li *ngFor="let todo of todos">
    <app-todo 
      [uuid]="todo.id"
      [title]="todo.title" 
      [isCompleted]="todo.isCompleted">
    </app-todo>
  </li>
</ol>

二、为什么测试中getAttribute('isCompleted')会返回null？ #

Angular的@Input属性是组件类的内部状态，默认不会同步到DOM元素的属性上。当你用[isCompleted]="todo.isCompleted"这种方括号绑定的时候，Angular只是把值传递给组件类的isCompleted字段，不会在DOM节点上生成对应的属性。而element.getAttribute()是读取DOM元素的原生属性，自然拿不到组件内部的输入属性值。

正确的测试断言方式 #

要验证子组件的输入属性是否正确绑定，你需要通过Angular的测试工具获取子组件的实例，直接访问其类属性：

it('should render todos with correct completion status', () => {
  // 获取所有app-todo的debugElement（Angular测试专用的元素包装器）
  const todoDebugElements = fixture.debugElement.queryAll(By.css('app-todo'));
  expect(todoDebugElements.length).toBe(mockTodos.length);

  for (let i = 0; i < todoDebugElements.length; ++i) {
    // 获取子组件实例
    const todoComponent = todoDebugElements[i].componentInstance as TodoComponent;
    const mockTodo = mockTodos[i];
    
    expect(todoComponent.uuid).toBe(mockTodo.id);
    expect(todoComponent.title).toBe(mockTodo.title);
    // 直接断言组件类的isCompleted属性
    expect(todoComponent.isCompleted).toBe(mockTodo.isCompleted);
  }
});

三、如果非要在DOM上看到布尔属性（可选） #

如果你确实需要让isCompleted作为DOM属性存在（比如用于CSS选择器或第三方库），可以在TodoComponent中用@HostBinding把属性绑定到DOM：

import { HostBinding } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.less'],
})
export class TodoComponent implements OnInit {
  @Input() uuid!: string;
  @Input() 
  // 绑定到DOM的is-completed属性（短横线命名符合HTML规范）
  @HostBinding('attr.is-completed') 
  isCompleted!: boolean;
  @Input() title!: string;

  // ... 其他代码不变
}

这时候测试里可以用getAttribute('is-completed')获取值，但要注意布尔属性在DOM中的规则：存在即代表true，不存在代表false，所以断言时要对应字符串或存在性：

const isCompletedAttr = todoItems[i].getAttribute('is-completed');
expect(isCompletedAttr).toBe(mockTodo.isCompleted ? 'true' : null);

不过一般来说，除非有特殊需求，不需要把组件输入属性同步到DOM，直接测试组件实例属性更直接准确。

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