Angular 14中如何根据用户输入动态改变可见元素数量

先解决你当前*ngFor不显示的问题：
*ngFor需要遍历可迭代对象（比如数组），如果numRectsSlider.value是数字（比如2），直接写*ngFor="let _ of numRectsSlider.value"是无效的——数字本身不能被遍历。你需要生成一个对应长度的数组来供指令遍历，具体写法如下：

动态创建的正确实现 #

1. 组件类（假设滑块用响应式表单的FormControl）：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  numRectsSlider = new FormControl(1); // 默认显示1个矩形

  // 生成对应长度的数组，供*ngFor遍历
  get rectsArray() {
    return Array(this.numRectsSlider.value).fill(0);
  }
}

2. 模板代码：

<rectangle-grid>
  <rectangle *ngFor="let _ of rectsArray; index as i" [key]="i"></rectangle>
</rectangle-grid>

（添加index as i是为了给每个矩形分配唯一标识，避免Angular变更检测出现警告）

两种方案对比 #

1. 动态创建（推荐）

• 优势：模板极度简洁，无需重复编写<rectangle>标签，完全根据滑块值动态生成/销毁组件，贴合Angular声明式编程的思路。后续如果扩展滑块范围（比如到10），代码几乎不用修改。
• 局限性：组件会随滑块值变化频繁创建销毁，但你的<rectangle>只是简单的样式组件，性能影响可以忽略。

2. 预创建+显隐控制

如果选择这种方式，直接在模板里写全4个矩形，用*ngIf控制显示：

<rectangle-grid>
  <rectangle *ngIf="numRectsSlider.value >= 1"></rectangle>
  <rectangle *ngIf="numRectsSlider.value >= 2"></rectangle>
  <rectangle *ngIf="numRectsSlider.value >= 3"></rectangle>
  <rectangle *ngIf="numRectsSlider.value >= 4"></rectangle>
</rectangle-grid>

• 优势：组件只会初始化一次，不会频繁创建销毁（适合复杂组件，但你的场景没必要）。
• 劣势：模板冗余，后续如果需要调整数量范围，得手动修改模板，维护成本更高。

最终建议 #

由于你的滑块范围仅1-4，两种方式都能实现，但动态创建的代码更简洁、扩展性更好，优先推荐这种方案。只要修正*ngFor的遍历对象，就能解决当前页面不显示矩形的问题。

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