[解決済み】Angularの例外。ngForIn'は既知のネイティブプロパティではないため、バインドできない
2022-03-24 21:42:28
質問
何が間違っているのでしょうか?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="let talk in talks">
{{talk.title}} by {{talk.speaker}}
<p>{{talk.description}}
</div>`
})
class ConfTalks {
talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
{title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
selector: 'my-app',
directives: [ConfTalks],
template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])
エラーは
EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
解決方法は?
この問題で5分以上無駄にするのは少なくとも3回目なので、Q&Aを投稿することにしました。
私は次のように入力しました。
in
ではなく
of
を ngFor 式で指定します。
2-beta.17の場合 となるはずです。
<div *ngFor="#talk of talks">
beta.17 以降では
let
構文の代わりに
#
. 詳しくは、さらに下のUPDATEを参照してください。
なお、ngForの構文は、"desugars"で以下のようになります。
<template ngFor #talk [ngForOf]="talks">
<div>...</div>
</template>
もし
in
の代わりに、次のようになります。
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
以降
ngForIn
は、同じ名前の入力プロパティを持つ属性ディレクティブではありません (たとえば
ngIf
の(既知のネイティブ)プロパティであるかどうかを確認しようとします。
template
要素で、そうではないため、エラーになります。
アップデイト
- 2-beta.17の時点では
let
構文の代わりに
#
. これにより、以下のように更新されます。
<div *ngFor="let talk of talks">
ngFor構文が以下のようにデスガースすることに注意してください。
<template ngFor let-talk [ngForOf]="talks">
<div>...</div>
</template>
もし
in
の代わりに、次のようになります。
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
関連
-
[解決済み] ngForにフィルターをかけるには?
-
[解決済み] Typescript - コードが TS1128: Declaration or Statement expected というエラーでビルドに失敗するが、コードを提供すると期待通りに実行される。
-
[解決済み] ローカルのワークスペース・ファイル('angular.json')が見つかりませんでした。しかし、同じコードが別のコンピュータで動作します
-
[解決済み] AngularでKendo Tabstripのタブを閉じるボタンを実装する方法
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angularのエラーです。"Can't bind to 'ngModel' because it isn't a known property of 'input'"."
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】'formControl'は'input'の既知のプロパティではないのでバインドできない - Angular2 Material Autocomplete問題
-
[解決済み】Angular2 Exception: routerLink'が既知のネイティブプロパティではないため、バインドできない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularのエラーです。NgModuleアノテーションを追加してください。
-
[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。
-
[解決済み] Angular 5:"ControlContainerのプロバイダがありません"
-
[解決済み] ng serve または firebase serve を終了させる方法
-
[解決済み] イオン4オブザーバブル
-
[解決済み] webpack のアップグレード後、名前空間 NodeJS が見つからない
-
[解決済み] "rxjs" observable.throw は関数ではありません - Angular4
-
[解決済み] ブレークポイントの解除 - VS Code | Chrome | Angular
-
[解決済み] Angular InjectionTokenが「No provider for InjectionToken」をスローします。
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない