私のコードのこの部分にエラーがあります
<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),
);
}
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>
安全なナビゲーション演算子(?。)および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>
変数を空に初期化すると、問題が解決しました。
DoctorList: any[] = [];
宣言で配列を初期化することができます:
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),
);
}