如何修复此错误类型错误：无法以角度读取未定义的属性（读取“长度”）答案

【问题标题】：how to fixed this ERROR TypeError: Cannot read properties of undefined (reading 'length') in angular如何修复此错误类型错误：无法以角度读取未定义的属性（读取“长度”）
【发布时间】：2022-04-11 05:07:30
【问题描述】：

为什么 categoryJobLists.length 会出现错误 ERROR TypeError: Cannot read properties of undefined (reading 'length')

<ion-content>

  <div *ngIf="categoryJobLists && categoryJobLists.length > 0">
    <ion-grid>
      <ion-row *ngFor="let categorysJobs of categoryJobLists">
        <ion-col size="6" (click)="openJobDetailPage(categoryJobLists)">
          <ion-card>
            <ion-card-header>
              <ion-card-title> {{categorysJobs.job_title}} </ion-card-title>
              <ion-card-subtitle>Total Opening:  {{categorysJobs.total_vacancies}} </ion-card-subtitle>
            </ion-card-header>
          
            <ion-card-content>
              Open from  {{categorysJobs.apply_from_date}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div *ngIf="categoryJobLists && categoryJobLists.length == 0">
    <ion-chip>
      <ion-icon name="close-circle-outline"></ion-icon>
      <ion-label>Not Found</ion-label>
    </ion-chip>
  </div>
  
</ion-content>

【问题讨论】：

请点击堆栈跟踪中的template.html:33 以查看导致问题的表达式并分享。也许问题出在其他地方。
只检查'*ngIf="categoryJobLists"'
请发布整个代码，因为我们看不到第 33 行。也请尝试在其他浏览器中打开您的应用程序。我有一个类似的错误，Chrome 和 Firefox 不同意错误的位置。事实证明 Firefox 是最精确的。

标签： angular typescript ionic-framework ionic5 angular12

【解决方案1】：

    <ion-content>
    
      <div *ngIf="categoryJobLists && categoryJobLists?.length > 0">
        <ion-grid>
          <ion-row *ngFor="let categorysJobs of categoryJobLists">
            <ion-col size="6" (click)="openJobDetailPage(categoryJobLists)">
              <ion-card>
                <ion-card-header>
                  <ion-card-title> {{categorysJobs?.job_title}} </ion-card-title>
                  <ion-card-subtitle>Total Opening:  {{categorysJobs?.total_vacancies}} </ion-card-subtitle>
                </ion-card-header>
              
                <ion-card-content>
                  Open from  {{categorysJobs?.apply_from_date}}
                </ion-card-content>
              </ion-card>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>

  <div *ngIf="categoryJobLists && categoryJobLists?.length == 0">
    <ion-chip>
      <ion-icon name="close-circle-outline"></ion-icon>
      <ion-label>Not Found</ion-label>
    </ion-chip>
  </div>
  
</ion-content>

像这样更改您当前的代码并在您的 .ts 文件中添加一个属性

export class ListJobPage implements OnInit {
categoryJobLists: any = [];
  constructor( ) { }
  ngOnInit() { }
}

像这样……

出现此问题，您必须在 .ts 文件中添加了“categoryJobLists”属性，就像... p>

categoryJobLists: any;

必须将'categoryJobLists'添加为数组，那么只有我们可以取数组长度，如果我们将'categoryJobLists'声明为'any'，那么就不具体了。

【讨论】：