Angular组件@Input属性propertyName传入后仍为undefined问题

问题核心原因 #

你遇到的问题本质是回调函数的this上下文丢失：mat-autocomplete的displayWith接收的回调函数默认不会绑定组件实例的this，导致函数内无法访问组件的propertyName属性，即使组件已通过*ngIf="propertyName"渲染，方法内的this依然指向全局对象（或undefined）。

具体解决步骤 #

1. 修复displayFn的this指向 #

这是最直接的解决方案，有两种实现方式：

方案一：用箭头函数定义displayFn

箭头函数会自动继承外层上下文的this，直接修改组件TS代码：

// 替换原displayFn函数
displayFn = (elem: any) => {
  if (elem && this.propertyName) {
    console.log(this.propertyName);
    return elem[this.propertyName];
  }
  return '';
}

方案二：在ngOnInit中手动绑定this

如果坚持使用普通函数，在组件初始化时绑定this到组件实例：

ngOnInit() {
  this.dataToFilter = this.data;
  // 绑定displayFn的this指向当前组件
  this.displayFn = this.displayFn.bind(this);
}

2. 验证输入属性的传入状态（可选） #

可以通过ngOnChanges钩子监控输入属性的变化，确认propertyName是否正确传入：

// 先导入OnChanges和SimpleChanges
import { OnChanges, SimpleChanges } from '@angular/core';

// 组件类实现OnChanges接口
export class DropdownAutocompleteComponent implements OnInit, OnChanges {
  // ... 其他代码

  ngOnChanges(changes: SimpleChanges) {
    if (changes['propertyName']) {
      console.log('propertyName传入值:', changes['propertyName'].currentValue);
    }
  }
}

3. 排除模块声明问题（兜底检查） #

确保DropdownAutocompleteComponent已正确添加到所属模块的declarations数组中：

@NgModule({
  declarations: [
    DropdownAutocompleteComponent
    // ... 其他组件
  ]
})
export class YourModule { }

修改后的完整TS代码示例 #

import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-dropdown-autocomplete',
  templateUrl: './dropdown-autocomplete.component.html',
  styleUrls: ['./dropdown-autocomplete.component.css']
})
export class DropdownAutocompleteComponent implements OnInit, OnChanges {

  @Input() label?: string;
  @Input() data!: any[];
  @Input() formControl!: FormControl;
  @Input() propertyName!: string;
  @Input() disableInput!: boolean;
  @Output() onSelection = new EventEmitter<any>()

  dataToFilter?: any[] = [];
  selected = '';

  displayFn = (elem: any) => {
    if (elem && this.propertyName) {
      console.log(this.propertyName);
      return elem[this.propertyName];
    }
    return '';
  }

  constructor() { }

  ngOnInit() {
    this.dataToFilter = this.data;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['propertyName']) {
      console.log('propertyName传入值:', changes['propertyName'].currentValue);
    }
  }

  filter(inputString: any) {
    const filterValue = inputString.target.value.toLowerCase();
    this.dataToFilter = this.data.filter(option => 
      option[this.propertyName].toLowerCase().includes(filterValue)
    );
  }

  decapitalize(str: string) {
    return str.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())
  }
}

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