错误类型错误：无法读取未定义的属性“长度”

Posted 2023-02-15

【中文标题】错误类型错误：无法读取未定义的属性“长度”

【英文标题】：ERROR TypeError: Cannot read property 'length' of undefined

【发布时间】：2017-11-25 03:32:05

【问题描述】：

我的这部分代码有错误

<img src="../../../assets/gms-logo.png"  routerLink="/overview" >

但是当我检查资产文件夹时，gms-logo.png 仍然存在，而在 angular-cli.json 中，资产也存在。路径也是正确的。

不过，我最近一直在研究搜索功能。所以我的假设是，

即使用户仍然没有关注输入类型，程序是否已经开始搜索？我该如何解决这个问题？

以下是我的搜索 html 及其建议部分的显示

<input type="text" placeholder="Search" (keyup)="onSearch($event.target.value)">        
<div class="suggestion"  *ngIf="results.length > 0">
     <div *ngFor="let result of results ">
          <a href="" target="_blank">
                 result.name 
          </a>
     </div>
</div>

下面是我的组件

results: Object;



 onSearch(name) 
            this.search
            .searchEmployee(name)
            .subscribe(
                name => this.results = name,//alert(searchName),this.route.navigate(['/information/employees/']),
                error => alert(error),
                );

【问题讨论】：

你可以像这样“assets/gms-logo.png”访问你的img

【参考方案1】：

您需要将 results 变量初始化为数组。

在您的组件中，添加：

results = [];

另一种选择是更改您的建议 div 的 *ngIf 语句以检查是否定义了 results：

<div class="suggestion"  *ngIf="results">
   <div *ngFor="let result of results ">
          <a href="" target="_blank">
                 result.name 
       </a>
   </div>
</div>

【讨论】：

谢谢。我已将结果设置为对象。这就是为什么。谢谢

没问题 - 坚持下去！

另一种选择：results?.length > 0.

@developer033 由于其他解决方案不适用于可观察对象数组，因此到处寻找解决方案。但 ”？。”立即修复它！非常感谢！

我添加了私有 userListing: User[]=[];然后工作。谢谢

【参考方案2】：

The safe navigation operator ( ?. ) and null property paths

Angular 安全导航运算符 (?.) 是防止属性路径中出现空值和未定义值的一种流畅且方便的方法。就是这样，如果 currentHero 为 null，则防止视图渲染失败。

所以在您的示例中，您还可以使用 安全导航运算符 (?.)：

<div class="suggestion"  *ngIf="results?.length > 0">
    <div *ngFor="let result of results ">
        <a href="" target="_blank">
             result.name 
        </a>
    </div>
</div>

【参考方案3】：

将变量初始化为空解决了我的问题。

 DoctorList: any[] = [];

【参考方案4】：

我陷入了类似的情况，即使将results 分配为数组 （如下所示），错误仍然存​​在。

results: Array<any>;

使用“？” （安全导航操作员） 对我来说效果很好。

*ngIf="results?.length"

安全导航运算符 (?) 可用于防止 Angular 在尝试访问不存在的对象的属性时抛出错误。

仅当results 的值不是Null 或Undefined 时，此示例才会评估length。

【参考方案5】：

我遇到了同样的问题。我找到了两种解决方法

将结果赋值为数组

结果 = []

在html中

*ngIf="results.length"

使用？

*ngIf="results?.length"

【参考方案6】：

你可以在声明中初始化你的数组：

    result: Array<any>;

如果问题风格持续存在，您应该在您的方法中检查 null，如下所示：

onSearch(name) 
        this.search
        .searchEmployee(name)
        .subscribe(
            name =>
if(name!=null)
this.results = 
name,//alert(searchName),this.route.navigate(['/information/employees/']),


            error => alert(error),
            );