親の「my-app」コンポーネントで使用しているangular2コンポーネント「my-tree」があります。「my-app」は次のとおりです。
@Component({
selector: 'my-app',
providers: [],
template: `
<my-tree *ngFor="#node of nodes" [title]="node">
<my-tree *ngFor="#subNode of getSubNodes(node)" [title]="subNode">
</my-tree>
</my-tree>
`,
directives: [MyTree]
})
export class App {
constructor() {
this.nodes = ['Angular2', 'typescript', 'js']
}
getSubNodes( node: string ) {
if( node === 'Angular2') {
return ['2.0.0', '1.4.2']
}
if ( node === 'typescript' ) {
return ['1.7.3'];
}
if ( node === 'js' ) {
return ['es-6'];
}
}
}
my-treeは単純なコンポーネントです-
@Component({
selector: 'my-tree',
providers: [],
inputs: ['title'],
template: `
<ul>
<li><span>{{title}}</span></li>
<ng-content></ng-content>
</ul>
`,
directives: []
})
export class MyTree {
private title: string;
}
これを実行すると、コンソールは次のエラーでログに記録されます-チェック後に式 'getSubNodes（node）in App @ 2：15'が変更されました。以前の値：「2.0.0,1.4.2」。現在の値：「2.0.0,1.4.2」。
実際のコードについては、このプランクを参照してください。
私のコードのアイデアは、ツリー（単なる例）を作成することです。最初のレベルは配列（ハードコードされた値）から取得され、2番目のレベルは現在のノード（または値）を指定して次のセットを返す関数から取得されます。最初のレベル。そして、この関数の呼び出しでは、Angularは、チェック後に式が変更されたことを訴えます。値は以前のエラーメッセージとまったく同じように報告されますが。SOでこのエラーを検索したところ、参照はほとんど見つかりませんでしたが、ほとんどの場合、変更検出を呼び出すことを提案しています。なぜこれが必要なのか、またその方法も理解できません。また、これは診断メッセージのみであり、本番モードではスローされないことも読みました。
* ngFor内で関数を呼び出すことはできませんか？このエラーを取り除くために何をすべきですか？
問題は
getSubNodes( node: string ) {
if( node === 'Angular2') {
return ['2.0.0', '1.4.2']
}
if ( node === 'typescript' ) {
return ['1.7.3'];
}
if ( node === 'js' ) {
return ['es-6'];
}
}
ここでは、Angularが値をチェックするたびに、新しい配列インスタンスを取得するため、それらが同じになることはありません。Angularは、配列のインスタンスの同等性のみの値を比較しません。
このチェックも開発モードでのみ実行されます。Angular2の本番モードと開発モードの違いは何ですか？も参照してください。
このようにAngularは満たされるべきです
angular2 = ['2.0.0', '1.4.2'];
typeScript = ['1.7.3'];
js = ['es-6'];
getSubNodes( node: string ) {
if( node === 'Angular2') {
return this.angular2;
}
if ( node === 'typescript' ) {
return this.typeScript;
}
if ( node === 'js' ) {
return this.js;
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加