錯誤類型錯誤：無法讀取未定義的屬性“長度”

Question

我的這部分代碼有錯誤

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

但是當我檢查資產文件夾時， 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),
                );
}

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 屬性路徑

Angular 安全導航操作符 (?.) 是防止屬性路徑中出現 null 和 undefined 值的一種流暢而方便的方法。 在這里，如果 currentHero 為空，則防止視圖渲染失敗。

因此，在您的示例中，您還可以使用安全導航運算符 ( ?. ) ：

<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[] = [];

Answer 4

我陷入了類似的情況，即使將results分配為數組（如下所示） ，錯誤仍然存​​在。

results: Array<any>;

使用 '？' （安全導航操作員）對我來說效果很好。

*ngIf="results?.length"

安全導航運算符(?) 可用於防止 Angular 在嘗試訪問不存在的對象的屬性時拋出錯誤。

此示例僅在results值不是Null或Undefined時才計算length 。

Answer 5

你可以在聲明中初始化你的數組：

    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),
            );
}

Answer 6

我有同樣的問題。 我找到了 2 種方法來修復它

1. 將結果分配為數組

   結果 = []

在 html 中

*ngIf="results.length"

2. 用 ？

   *ngIf="結果？.長度"