That's a timing issue. `@Input() transport:Transport` doesn't yet have a
value when Angular tries to evaluate the binding
`transport.cars[0].electrics[1].name` the first time.
`@Input() transport:Transport` is only set after `ngOnInit() { ... }
To work around use the elvis operator
transport?.cars[0].electrics[1].name
This the evaluation returns `null` when `transport` is null and `.cars...`
isn't tried unless `transport !== null`
On Thursday, March 24, 2016 at 9:50:13 PM UTC+1, Timothy Sandberg wrote:
>
> I have this scenario: I'm using TypeScript, and I want to pass a
> "Transport" object that contains an array of "Electrics" nested within an
> array of "Cars" from a parent component to its child component.
>
> How do I access a particular "Electric" for purposes of rendering in the
> html like this:
>
> <html>
> Model
> <input [(ngModel)="transport.cars.find(c => c.isActive ==
> true).electrics.find(e => e.isActive == true).modelName"] />
> <html>
>
> *******
>
> @View({
> template: template,
> directives: [
> ChildComponent,
> })
> export class ParentComponent{
> transport: Transport;
>
> sendTheTransport(){
> this.transport = setThisObjectWithData();
> }
> }
>
> Parent template:
> <div>
> <child [transport]="transport"></child>
> </div>
>
> export class ChildComponent{
> @Input() transport: Transport;
>
> Is there a way to intercept the object before the partial HTML is
> rendered? This is not scalable:
> <html>
> Model
> <input [(ngModel)="transport.cars[0].electrics[2].modelName"] />
> <html>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
