Question

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

2017-06-22

114378

angular typeerror angular-cli google-developers-console google-developer-tools

我的代码的这一部分有错误

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

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

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

Has the program started searching even if the user is still not focused on the input type? How do I fix this?

下面是我的搜索 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),
                );
}

Answer 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>

Answer 2

安全导航运算符 ( ?. ) 和 null 属性路径

The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined values in property paths. Here it is, protecting against a view render failure if the currentHero is null.

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

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

Answer 3

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

 DoctorList: any[] = [];

Arun Prasad E S

2019-06-14