web-dev-qa-db-ja.com

エラーTypeError:未定義のプロパティ 'length'を読み取れません

私のコードのこの部分にエラーがあります

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

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>
14
Levi Fuller

安全なナビゲーション演算子(?。)およびnullプロパティパス

Angular安全なナビゲーション演算子(?。)は、プロパティパスのnullおよび未定義の値から保護するための流andかつ便利な方法です。 。

したがって、あなたの例では、安全なナビゲーション演算子(?。)も使用できます:

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

変数を空に初期化すると、問題が解決しました。

 DoctorList: any[] = [];
2
Arun Prasad E S

宣言で配列を初期化することができます:

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