Angular 从 v9 更新到 v10 后出错。在初始化之前使用属性“propertyName”答案

【问题标题】：Error after Angular update from v9 to v10. Property 'propertyName' is used before its initializationAngular 从 v9 更新到 v10 后出错。在初始化之前使用属性“propertyName”
【发布时间】：2021-10-22 08:08:02
【问题描述】：

我在 Google/Github/Stackoverflow 中搜索了有关此错误的信息，但无法解决此问题。我希望有人可以帮助解决或提出建议

我已将 Angular 项目从 v9 更新到 v10，更新后我在几个模块中遇到如下错误。

属性“searchParameters”在初始化之前使用。

地址：this.searchParameters?.address,

简而言之就是代码：

export interface PartnerSearchParameters {
   name?: string;
   code?: string;
   address?: string;
   taxRegNumber?: string;
}

@Component({
  selector: 'app-partner-search-list',
  templateUrl: './partner-search-list.component.html',
  styleUrls: ['./partner-search-list.component.scss']
})

export class PartnerSearchListComponent implements OnInit, AfterViewInit {

searchParameters: PartnerSearchParameters;

modelMainFilters = {
    address: this.searchParameters?.address,
    code: this.searchParameters?.code,
    name: this.searchParameters?.name 
    taxRegNumber: this.searchParameters?.taxRegNumber ,
  };

constructor(...){}
ngOnInit(): void {...}
...
}

searchParameters 是在我想使用的 modelMainFilters 之前定义的..

所以我完全不明白我应该在哪里定义它是好的。

有什么建议吗？

【问题讨论】：

标签： angular typescript angular-upgrade

【解决方案1】：

错误很明显，searchParameters 的属性在初始化之前尝试使用它。

一种解决方案是用一些值对其进行初始化

searchParameters: PartnerSearchParameters = {
  name: '',
  code: '',
  address: '',
  taxRegNumber: ''
}

或者更好的是，仅在 searchParameters 初始化后才初始化 modelMainFilters

export class PartnerSearchListComponent implements OnInit, AfterViewInit {
  searchParameters: PartnerSearchParameters;
  modelMainFilters: PartnerSearchParameters;

  ngOnInit(): {
    this.someFunc().subscribe(res => {       // <-- example
      this.searchParameters = res;
      this.modelMainFilters = this.searchParameters;
    });
  }
}

【讨论】：

【解决方案2】：

你可以像这样使用non-null assertion operator：

export interface PartnerSearchParameters {
   name?: string;
   code?: string;
   address?: string;
   taxRegNumber?: string;
}

@Component({
  selector: 'app-partner-search-list',
  templateUrl: './partner-search-list.component.html',
  styleUrls: ['./partner-search-list.component.scss']
})

export class PartnerSearchListComponent implements OnInit, AfterViewInit {

searchParameters!: PartnerSearchParameters;

modelMainFilters = {
    address: this.searchParameters?.address,
    code: this.searchParameters?.code,
    name: this.searchParameters?.name, 
    taxRegNumber: this.searchParameters?.taxRegNumber
  };

constructor(...){}
ngOnInit(): void {...}
...
}

请记住，这样做您最终会得到modelMainFilters 的所有属性等于undefined，如下所示：

modelMainFilters: {
  address: undefined,
  code: undefined,
  name: undefined,
  taxRegNumber: undefined
}

【讨论】：