Question

你好我想显示一个用户数据列表，但是如果用户数据大于0则我已经设置了一个条件，然后显示*ngIf中长度属性的帮助，所以当我使用它时我的问题就像Cannot read property 'length' of undefined那样得到错误，所以请任何人帮助我。
我也在angular2版本上显示相同的问题，但没有多大帮助。这是我的看法。

<div *ngIf="(studentListData | filter).length == 0">
   <h3>Sorry ..!data not found</h3>
</div>

<div *ngIf="(studentListData | filter | filter ).length > 0>
   <tr *ngFor="let student of studentListData | filtter; index as i;">
        // ** here is my td *//
   </tr>
</div>

在我的组件中

export class studentAllComponet implements OnInit {
  studentListData:any;

getStudentList(){
        let studentList = this.studentService.getAllStudents();
        this.success(studentList)
    }

success(data){
        this.studentListData = data;
        for (var i = 0; i < this.studentListData.length; i++) {
            this.studentListData[i].name = this.studentListData[i].first_name +' '+ this.studentListData[i].last_name;
        }
    }

}

在我的过滤器中

@Pipe({  name: 'filtter' })
export class FiltterPipe implements PipeTransform{
   transform(value: any, args?: any): any {
        if (args != undefined && args != null && args != '') {
            return value.filter(data => (data.name.toLowerCase()).indexOf(args.toLowerCase()) > -1);
        }
        return value;
    }
}

提前致谢..！

Answer 1

在您的模板中，您可以使用safe navigation operator＆＃39;？＆＃39;在属性访问之前，如果有一个对象，angular会检查你。我猜studentListData为null或未在模板渲染时定义。

<div *ngIf="(studentListData | filter)?.length == 0">
   <h3>Sorry ..!data not found</h3>
</div>

<div *ngIf="(studentListData | filter | filter )?.length > 0">
   <tr *ngFor="let student of studentListData | filtter; index as i;">
        // ** here is my td *//
   </tr>
</div>

Answer 2

如果你的studentService返回一个observable，我会使用subscribe从中获取结果并在subscribe方法中操作结果：

getStudentList(){
  this.studentService
    .getAllStudents()
    .subscribe((data: any) => {
      data.forEach((d) => {
        d.name = d.first_name + ' ' + d.last_name
      })
      this.studentListData = data;
    });
}

Answer 3

我认为，您只能在TypeSript中处理此问题。无需更改HTML代码。

在您的组件中，您可以检查studentList是否为空。

export class studentAllComponet implements OnInit {
studentListData:any;

getStudentList(){
let studentList = this.studentService.getAllStudents();
**if(studentList === undefined){
  alert('Student List is empty');
  return[];
}**
else{
    this.success(studentList)
    }
}

success(data){
    this.studentListData = data;
    for (var i = 0; i < this.studentListData.length; i++) {
        this.studentListData[i].name = this.studentListData[i].first_name +' '+ this.studentListData[i].last_name;
    }
}

}

现在您无需在HTML中使用任何过滤器。

Answer 4

一个非常简单的解决方案：

在您的组件文件中，您可以使用这样的空数组初始化 studentListData

export class studentAllComponet implements OnInit {
    studentListData:any = [];

现在，这将解决 undefined 问题，因为您总是有一个数组，只是在开始时它是空的。

希望这会有所帮助。快乐编码：）

Angular5无法读取未定义的属性“长度”

4 个答案: