Repository navigation
components created multiple times using ngForTemplate #4769
Description
I'm using the new ngForTemplate and when use it with a collection, the rendered components are new instances and not the objects that I created at the beginning and the constructor is called multiple times.
Let me describe the problem in code (see full code at plunker here ):
app.ts
using the list component
<list [list-rows]="myRows" >
<li template="#item #i=index">
<myCustomListRow>{{item}}</myCustomListRow>
</li>
</list>
creating the objects and setting the property value that is expected to be rendered
constructor() {
this.myRows = [];
this.myRows.push(new MyCustomListRow());
this.myRows[0].rowId = "0 :) ";
this.myRows[0].customProp = "00 :) ";
this.myRows.push(new MyCustomListRow());
this.myRows[1].rowId = "1 :) ";
this.myRows[1].customProp = "11 :) ";
}
list.ts
using ng-for-template
template: `
<ul>
<template ng-for [ng-for-of]="listRows"
[ng-for-template]="contentTpl" >
</template>
</ul>
`
listRow.ts
defining the template used in the ng-for and custom content defined by other component (myCustomListRow.ts)
@View({
template: `
<ng-content ></ng-content>
<input type="button"
value="{{rowId}}"
>`
})
initializing the property value, this value will be overwritten and must not be rendered
constructor() {
this.rowId = ":(";
console.log('new ListRow');
}
myCustomListRow.ts
defining content to be used in listRow
@View({
directives:[ListRow],
template: `
<listRow>
{{rowId}} - {{customProp}}
</listRow>
`
})
initializing the property value, this value will be overwritten and must not be rendered
constructor() {
super();
this.rowId = ' :( ';
console.log('new MyCustomListRow');
}
Results
current result
<li>
<mycustomlistrow>
<listrow>
:( - :(
<input type="button" value=":("></listrow>
</mycustomlistrow>
</li><li>
<mycustomlistrow>
<listrow>
:( - :(
<input type="button" value=":("></listrow>
</mycustomlistrow>
</li>
expected result
<li>
<mycustomlistrow>
<listrow>
0 :) - 00 :)
<input type="button" value="0 :)"></listrow>
</mycustomlistrow>
</li><li>
<mycustomlistrow>
<listrow>
1 :) - 11 :)
<input type="button" value="1 :)"></listrow>
</mycustomlistrow>
</li>
@tbosch what do you think ?
Activity
gustavoq-infocorp commentedon Nov 13, 2015
I'm closing the issue, was my mistake binding the list to the component class ListRow
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.