组件间数据传递异常：@Input装饰器问题及删除功能实现求助

先揪出你代码里的致命问题 #

1. 语法错误：子组件里let chipValue = string [] = [];完全不符合TypeScript语法，正确声明数组应该是let chipValue: string[] = [];
2. 拼写错误：父组件HTML里绑定的[valuesFiter]少写了一个l，必须和子组件@Input的名字valuesFilter完全一致
3. 数据未定义：父组件里只声明了filters，但绑定给子组件的chipValue变量根本没定义，子组件自然接收不到数据，数组为空
4. 逻辑错误：子组件直接修改this.valuesFilter（父组件传过来的@Input属性），Angular里@Input是单向绑定，子组件直接修改会导致数据不同步，甚至报错

修正后的完整代码 #

子组件（filter-chip.component.ts）

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

@Component({
  selector: 'app-filter-chip',
  templateUrl: './filter-chip.component.html'
})
export class FilterChipComponent {
  @Input() chipValue: string; // 接收单个chip的值（循环渲染场景更合理）
  @Output() onDelete = new EventEmitter<string>();

  deleteClick() {
    // 触发事件通知父组件删除对应值
    this.onDelete.emit(this.chipValue);
  }
}

子组件HTML（filter-chip.component.html）

<div class="chip">
  {{ chipValue }} <!-- 显示chip内容 -->
  <button class="closebtn" (click)="deleteClick()">×</button>
</div>

父组件（示例：app.component.ts）

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

interface CFilter {
  // 定义你的CFilter类型结构
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public filters: CFilter[] | undefined;
  public chipValues: string[] = ['价格区间', '品牌', '销量']; // 定义要传递的chip数组
  // 若需从filters取数据，可在ngOnInit中处理：
  // ngOnInit() {
  //   this.chipValues = this.filters?.map(f => f.name) || [];
  // }

  handleDelete(value: string) {
    // 父组件中删除对应元素，保证数据源唯一
    this.chipValues = this.chipValues.filter(item => item !== value);
  }
}

父组件HTML（app.component.html）

<!-- 循环渲染每个chip，传递单个值并绑定删除事件 -->
<app-filter-chip 
  *ngFor="let value of chipValues"
  [chipValue]="value"
  (onDelete)="handleDelete($event)"
></app-filter-chip>

@Input的正确使用方式 #

• 单向绑定原则：@Input是父→子的单向数据通道，子组件绝对不能直接修改@Input绑定的属性，否则会打破数据流向，导致父组件数据不同步，严格模式下还会报错。要修改数据必须通过@Output触发事件，让父组件修改源数据。
• 命名严格匹配：父组件HTML绑定的属性名要和子组件@Input的名字完全一致（区分大小写），如需别名可使用@Input('别名') 变量名: 类型;，比如@Input('chip-value') chipValue: string;，父组件即可用[chip-value]="value"绑定。
• 默认值与非空处理：可给@Input设置默认值，比如@Input() chipValue: string = '默认值';，若数据可能为空，建议用可选类型@Input() chipValue?: string;。
• 监听数据变化：若需在@Input数据变化时执行逻辑，可使用ngOnChanges钩子，或用@Input() set chipValue(value: string) { /* 处理逻辑 */ }的setter方式。

内容的提问来源于stack exchange，提问作者SGA-AllStar