[Angular 2] erreur handler sur une liste

Version imprimable

Bonjour,

Je travaille sur Angular2 j'ai mon backend qui me fourni une liste de données

je charge la liste en provenance de mon backend
je selectionne un element de ma liste
et j'affiche les details de mon element
j'edite mon element de la liste
et quand je soumet le formulaire j'ai une erreur
les modif sont en bd mais mon application plante

et j'ai une erreur au moment d'une faire une action sur un element de la liste voici ma requete:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 getList(Id : number ){
 
        this.startLoading();
 
        this.currentItem = null;
        this.items = [];
 
        return this.http.get( prefix+'monUrl/'+Id)
            .catch( this.addError )
            .map( (responseData : any ) => {
                return responseData.json();
            })
            .map( (items : Array<Object>) => {
                if( items['error'] != null ){
                    this.addError(items);
                    return;
                }
 
            });
    }

voici ma fonction update:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var headers = new Headers();
        headers.append("Content-Type","application/json");
        return this.http.post( prefix+'/.../update'+ this.Id, JSON.stringify({
            action : "enable-item",
        }), {headers : headers})
            .catch( this.addError )
            .map( (res : any) => {
                return res.json();
            })
            .map( (res : any) => {
                if( res['error'] != null ){
                    this.addError(res);
                    return;
                }
                this.forceReload = true;
                return true;
            });

et voici mon erreur en console:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
core.umd.js:3467 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3467
next @ core.umd.js:6924
t.object.i @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
core.umd.js:3468 Error: Cannot find a differ supporting object '2'
    at KeyValueDiffers.find (core.umd.js:4859)
    at NgClass.set [as ngClass] (common.umd.js:1543)
    at _View_MessageDisplay1.detectChangesInternal (MessageDisplay.ngfactory.js:147)
    at _View_MessageDisplay1.AppView.detectChanges (core.umd.js:9566)
    at _View_MessageDisplay0.AppView.detectContentChildrenChanges (core.umd.js:9584)
    at _View_MessageDisplay0.detectChangesInternal (MessageDisplay.ngfactory.js:41)
    at _View_MessageDisplay0.AppView.detectChanges (core.umd.js:9566)
    at _View_ListComponent0.AppView.detectViewChildrenChanges (core.umd.js:9592)
    at _View_ListComponent0.detectChangesInternal (ListComponent.ngfactory.js:98)
    at _View_ListComponent0.AppView.detectChanges (core.umd.js:9566)
ErrorHandler.handleError @ core.umd.js:3468
next @ core.umd.js:6924
t.object.i @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
core.umd.js:4859 Uncaught Error: Cannot find a differ supporting object '2'
    at KeyValueDiffers.find (core.umd.js:4859)
    at NgClass.set [as ngClass] (common.umd.js:1543)
    at _View_MessageDisplay1.detectChangesInternal (MessageDisplay.ngfactory.js:147)
    at _View_MessageDisplay1.AppView.detectChanges (core.umd.js:9566)
    at _View_MessageDisplay0.AppView.detectContentChildrenChanges (core.umd.js:9584)
    at _View_MessageDisplay0.detectChangesInternal (MessageDisplay.ngfactory.js:41)
    at _View_MessageDisplay0.AppView.detectChanges (core.umd.js:9566)
    at _View_ListComponent0.AppView.detectViewChildrenChanges (core.umd.js:9592)
    at _View_ListComponent0.detectChangesInternal (ListComponent.ngfactory.js:98)
    at _View_ListComponent0.AppView.detectChanges (core.umd.js:9566)

j'ai procedé a une recherche et n'ai rien trouvé sur le sujet peut-être que je ne cherche pas au bon endroit?

PS: ma liste est très longue ce qui génère quand même des autres bogues comme le trie des elements..

ma prioriter est cette erreur de handler..

Merci.

25/07/2017, 17h34
pterrat

ton retour de l'update doit faire planter un ngFor.
Est-ce le type de ton retour d'update est un objet que tu utilises plus tard comme un Array?

UPDATE du bug de ma liste

Merci pour ta réaction..

je me permet de mettre a jour mon post car je n'ai plus le souci precedent

malgrer cela j'ai au moment de cliqué sur l'element de la liste l'erreur en dessous:

je charge ma liste comme précedement
je clique sur un element
je charge normalement la description avec une image
et j'ai l'erreur suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
core.umd.js:3467 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3467
next @ core.umd.js:6924
t.object.i @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
r.args.(anonymous function) @ zone.js:970
core.umd.js:3468 TypeError: Cannot read property 'getContext' of null
    at http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:174:19747
    at ZoneDelegate.invokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:7165)
    at Object.onInvokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:76:12632)
    at ZoneDelegate.invokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:7101)
    at Zone.runTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:4405)
    at ZoneTask.invoke (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:8329)
    at r.args.(anonymous function) (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:209:105)
ErrorHandler.handleError @ core.umd.js:3468
next @ core.umd.js:6924
t.object.i @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
r.args.(anonymous function) @ zone.js:970
viewer.component.ts:137 Uncaught TypeError: Cannot read property 'getContext' of null
    at http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:174:19747
    at ZoneDelegate.invokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:7165)
    at Object.onInvokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:76:12632)
    at ZoneDelegate.invokeTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:7101)
    at Zone.runTask (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:4405)
    at ZoneTask.invoke (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:230:8329)
    at r.args.(anonymous function) (http://localhost:8000/proj/v0.8.8/dist/vendor.bundle.js:209:105)

Code:

canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

j'ai cette erreur quand je recharge la page et que ensuite je selectionne un element..

l'erreur ne se reproduit plus quand je continue..

Une idée?

EDIT: en fait il ne trouve pas un element dans mon DOM quand je vais le checher:

Code:

var canvas: any = document.getElementById(name + "Canvas")

quand je recharge la page le panneau description n'est pas charger ce qui est normale..

car je veux l'afficher seulement au click sur l'element de ma liste.

le DOM mes du temps a charger c'est normale?

peut être l'utilisation du websocket est lent..
non, je ne pense pas,

mais alors pourquoi le dom de ma description met du temp a se charger?

voici le code, je met un time out de 1 sec et je n'est plus cette erreur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 setTimeout(() => {
    var canvas: any = document.getElementById(name + "Canvas");
    $(canvas).attr('width', img.width + 'px');
    $(canvas).attr('height', img.height + 'px');
 
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
 
    if (name == 'typeOne') {
        this.typeOneDataUrl = canvas.toDataURL();
    } else {
        this.typeTwoDataUrl = canvas.toDataURL();
    }
 
    if (this.timeOutViewerOption) clearTimeout(this.timeOutViewerOption);
    this.timeOutViewerOption = setTimeout(() => {
        this.adaptViewerOptionSize();
    });
},1000);