Skip to content

Commit 4916279

Browse files
author
vakrilov
committed
renderer double *ngIf bug
1 parent 8f6e2a3 commit 4916279

File tree

3 files changed

+33
-149
lines changed

3 files changed

+33
-149
lines changed

‎ng-sample/app/app.ts

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
88
import { NativeScriptFormsModule } from "nativescript-angular/forms";
99
import { NativeScriptHttpModule } from "nativescript-angular/http";
1010
import {
11+
viewUtilCategory,
1112
rendererTraceCategory,
1213
routerTraceCategory,
1314
listViewTraceCategory,
@@ -18,7 +19,8 @@ import { Page } from "ui/page";
1819
import { Color } from "color";
1920
import { setCategories, enable } from "trace";
2021
setCategories(
21-
`${animationsTraceCategory},${rendererTraceCategory}`
22+
viewUtilCategory + ", " +
23+
rendererTraceCategory
2224
);
2325
// setCategories(routerTraceCategory);
2426
// setCategories(listViewTraceCategory);
@@ -90,11 +92,11 @@ function makeExampleModule(componentType) {
9092

9193
let providers = [];
9294
if (componentType.providers) {
93-
providers = [componentType.providers];
95+
providers = [ componentType.providers ];
9496
}
9597

9698
@NgModule({
97-
bootstrap: [componentType],
99+
bootstrap: [ componentType ],
98100
imports,
99101
entryComponents: entries,
100102
declarations: [
@@ -118,7 +120,7 @@ const customPageFactoryProvider = {
118120
}
119121
};
120122

121-
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
123+
platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
122124
// platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest));
123125
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(TabViewTest));
124126
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(Benchmark));
@@ -139,31 +141,31 @@ const customPageFactoryProvider = {
139141
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
140142

141143
// animations
142-
platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
144+
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
143145
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesMultiTest));
144146
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest));
145147
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest));
146148
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest));
147149

148150
// Livesync test
149-
let cachedUrl: string;
150-
onBeforeLivesync.subscribe((moduleRef) => {
151-
console.log("------- onBeforeLivesync");
152-
if (moduleRef) {
153-
const router = <Router>moduleRef.injector.get(Router);
154-
cachedUrl = router.url;
155-
console.log("------- Caching URL: " + cachedUrl);
156-
}
157-
});
151+
// let cachedUrl: string;
152+
// onBeforeLivesync.subscribe((moduleRef) => {
153+
// console.log("------- onBeforeLivesync");
154+
// if (moduleRef) {
155+
// const router = <Router>moduleRef.injector.get(Router);
156+
// cachedUrl = router.url;
157+
// console.log("------- Caching URL: " + cachedUrl);
158+
// }
159+
// });
158160

159-
onAfterLivesync.subscribe((moduleRef) => {
160-
console.log("------- onAfterLivesync cachedUrl:");
161-
const router = <Router>moduleRef.injector.get(Router);
162-
router.events.subscribe(e => console.log(e.toString()));
163-
if (router && cachedUrl) {
164-
setTimeout(() => { router.navigateByUrl(cachedUrl); }, 0);
165-
}
166-
});
161+
// onAfterLivesync.subscribe((moduleRef) => {
162+
// console.log("------- onAfterLivesync cachedUrl:");
163+
// const router = <Router>moduleRef.injector.get(Router);
164+
// router.events.subscribe(e => console.log(e.toString()));
165+
// if (router && cachedUrl) {
166+
// setTimeout(() => { router.navigateByUrl(cachedUrl); }, 0);
167+
// }
168+
// });
167169

168170
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp));
169171
console.log("APP RESTART");

‎ng-sample/app/examples/renderer-test.html

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1 @@
1-
<ScrollView>
2-
<StackLayout orientation='vertical'>
3-
<Label [text]='model.mydate | date:"fullDate"' [ngStyle]="{'background-color': 'lime'}"></Label>
4-
<Progress value="50" style="color: red"></Progress>
5-
<SearchBar [(ngModel)]='model.search'></SearchBar>
6-
<search-bar [(ngModel)]='model.search'></search-bar>
7-
<Label [text]='model.search' [style.backgroundColor]="'hotpink'"></Label>
8-
<Slider [(ngModel)]='model.sliderTest'></Slider>
9-
<Label [text]='model.sliderTest'></Label>
10-
<ListPicker [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>
11-
<TextField [(ngModel)]='model.selectedIndex'></TextField>
12-
<SegmentedBar [items]='model.segmentedBarItems' [(ngModel)]='model.selectedIndex'></SegmentedBar>
13-
<Label [text]='model.selectedIndex'></Label>
14-
<Switch [(ngModel)]='model.testBoolean'></Switch>
15-
<Label [text]='model.testBoolean'></Label>
16-
<Label [text]='model.test'></Label>
17-
<TextView #name [ngModel]='model.test' (ngModelChange)="model.test=setUpperCase($event)" fontSize='20' padding='20'></TextView>
18-
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
19-
<TextField #name text='John' fontSize='20' padding='20'></TextField>
20-
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
21-
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
22-
<TextView *ngIf='showDetails' [text]='detailsText'></TextView>
23-
<Label text='==============================' fontSize='20'></Label>
24-
<StackLayout #more *ngIf='showDetails' orientation='vertical'>
25-
<TextField *ngFor='let detailLine of detailLines' [text]='detailLine'></TextField>
26-
</StackLayout>
27-
<Label text='==============================' fontSize='20'></Label>
28-
<templated-component [renderChild]="true"></templated-component>
29-
</StackLayout>
30-
</ScrollView>
1+
<StackLayout orientation='vertical'><Button text='Toggle first' (tap)='toggleFirst()'></Button><Button text='Toggle second' (tap)='toggleSecond()'></Button><Label text='== 1 ==' fontSize='20'></Label><Label *ngIf='first' text='first'></Label><Label *ngIf='second' text='second'></Label><Label text='== 2 ==' fontSize='20'></Label></StackLayout>

‎ng-sample/app/examples/renderer-test.ts

Lines changed: 8 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -4,111 +4,22 @@ import { TextValueAccessor } from "nativescript-angular/value-accessors/text-val
44
import { CheckedValueAccessor } from "nativescript-angular/value-accessors/checked-value-accessor";
55
import { SegmentedBarItem } from "ui/segmented-bar";
66

7-
8-
function createTabItem(title: string) {
9-
let item = new SegmentedBarItem();
10-
item.title = title;
11-
return item;
12-
}
13-
14-
@Component({
15-
moduleId: module.id,
16-
selector: "templated-component",
17-
templateUrl: "../title.html"
18-
})
19-
export class TemplatedComponent {
20-
@Input() public renderChild: boolean = false;
21-
@Input() public text: string = "Hello, external templates";
22-
}
23-
24-
@Directive({
25-
selector: "Progress",
26-
})
27-
export class ProgressDirective {
28-
constructor(private element: ElementRef) {
29-
}
30-
31-
ngOnInit() {
32-
this.element.nativeElement.value = 90;
33-
}
34-
}
35-
367
@Component({
378
moduleId: module.id,
389
selector: "renderer-test",
3910
templateUrl: "./renderer-test.html"
4011
})
4112
export class RendererTest {
42-
public buttonText: string = "";
43-
public showDetails: boolean = false;
44-
public detailsText: string = "";
45-
public moreDetailsText: string = "";
46-
public detailLines: Array<string> = [];
47-
public isValid: boolean = true;
48-
public model: any;
49-
50-
public testModel = { mydate: new Date() };
51-
52-
static entries = [
53-
TemplatedComponent,
54-
];
55-
56-
static exports = [
57-
ProgressDirective
58-
];
59-
60-
constructor() {
61-
this.buttonText = "Save...";
62-
this.showDetails = true;
63-
this.detailsText = "plain ng-if directive \ndetail 1-2-3...";
64-
this.moreDetailsText = "More details:";
65-
this.model = {
66-
"test": "Jack",
67-
"testBoolean": false,
68-
"deliveryDate": new Date(),
69-
"deliveryTime": new Date(),
70-
"mydate": new Date(),
71-
"sliderTest": 0,
72-
"search": null,
73-
"selectedIndex": 0,
74-
"listPickerItems": [
75-
1, 2, 3, 4
76-
],
77-
"segmentedBarItems": [
78-
createTabItem("first"),
79-
createTabItem("second"),
80-
createTabItem("third"),
81-
createTabItem("fourth")
82-
]
83-
};
84-
85-
this.detailLines = [
86-
"ngFor inside a ngIf 1",
87-
"ngFor inside a ngIf 2",
88-
];
89-
}
90-
91-
onSave($event, name, $el) {
92-
console.log("onSave event " + $event + " name " + name);
93-
alert(name);
94-
}
95-
96-
testLoaded($event) {
97-
console.log("testLoaded called with event args: " + $event);
98-
}
13+
public first: boolean = false;
14+
public second: boolean = false;
9915

100-
onToggleDetails() {
101-
console.log("onToggleDetails current: " + this.showDetails);
102-
this.showDetails = !this.showDetails;
16+
toggleFirst() {
17+
console.log("onToggleDetails current: " + this.first);
18+
this.first = !this.first;
10319
}
10420

105-
setUpperCase($event) {
106-
if ($event.value && $event.value.toUpperCase) {
107-
return $event.value.toUpperCase();
108-
}
109-
if (typeof $event === "string") {
110-
return $event.toUpperCase();
111-
}
112-
return $event;
21+
toggleSecond() {
22+
console.log("onToggleDetails2 current: " + this.second);
23+
this.second = !this.second;
11324
}
11425
}

0 commit comments

Comments
 (0)