ng2: ngIf on object keys, undefined error...

[p. stephen w]

 This line produces an error on 'myObj': 
                       Cannot read property 'mykey' of undefined.

             <div *ngIf="myObj['mykey']">woot</div>                

It sounds like NG2 will not iterate over objects, and the only way around it is to write a custom pipe, or put a function on the component to parse the object. 
Do I have the current and correct understanding on this?

[Lucas Lacroix]

Where is "myObj" defined?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[p. stephen w]

Its defined on the component.

works as expected.
<div *ngIf="myOb">woot</div> 

[Lucas Lacroix]

Next question: why are you using the square bracket notation? Why not: myObj.mykey?
Also.... Are you sure you've initialized myObj?

[Sander Elias]

Hi P. Stephen,

Not entirely. The problem is that probably the myObj is undefined when the component initializes. Have you tried setting it to an empty object directly on your controller's constructor? 

Usually when you need something like this, you can use the elvis(?) operator to protect against undefined parts. This is not going to work for array notation. 

This does work for me:

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
  {{myObj['test']}}
  <pre>{{myObj|json}}</pre>  
  `
})
export class AppComponent {
  myObj = {}
  ngOnInit() {
    this.myObj= {test : "hello"}
  }
}

Hope this helps you a bit,

Regards

Sander

[p. stephen w]

NgInit is currently calling my service to return the Json. 
Is it true that the template doesn't get parsed until controller/component has ran?

How can I use an elvis (LOL, love the name)?   I'm assuming that's a is-nullable operator?

[p. stephen w]

I wrote a pipe to handle this, but that seems like over kill.  Testing for a key in an object is basic, but a critical operation. 
Does NG2 really not allow do this, or am I just missing something?

@Pipe({name: 'matchkey'})
export class MatchkeyPipe implements PipeTransform {
    transform(obj:any, keys:any[]):any {
        try {
            if (obj && keys) {
              return keys.find(key => obj[key])
            }
        } catch (e) {
            console.log('...objectkey error ', e);
        }
    }
}

[p. stephen w]

If I do this, it works.  Which would mean listing out each prop that I expect to test.  That sounds like work!
It's better than nothing, but not as good as it should be. 

ngOnInit() {
    this.offers.exp = {};
    this.getOffers();
}

[Sander Elias]

Hi P. Steven,

You can use && to cater to your use-case.

like: 

{{myBlah && myBlah['test']}}

its much lighter as a pipe, and doesn't need to add the properties to your bare classes.

Regards

Sander

[p. stephen w]

Ah, that does work, even on a deeper object:
                *ngIf="myA.myB && myA.myB['1234']"

But why does that work, but not this:
               *ngIf="myA.myB['1234']"

[Lucas Lacroix]

This is not Angular. This is just Javascript and you cannot get the member (or subscript) of something that is null or undefined.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[p. stephen w]

You're not being helpful.  Please try to understand the question before posting.

[Lucas Lacroix]

If "myA.myB" is undefined or null, then "myA.myB[subscript]" will throw an exception. This is simple Javascript programming and not anything to do with Angular.

Although Angular *could* cover the possibility of referencing undefined variables or members in bound logic, doing so could hide bad code and produce unexpected results.

It is up to you, as the programmer, to decide what happens when the variable/member you are referencing is not defined.

I hope that explains things.