how do not view extra empty div and 'TypeError: self.context.$implicit is undefined'

Question

1.Hello.I send an array from json file to this.contentArray for view it in *ngFor. the length of array is: console.log(this.contentArray.length); // is 2, so logically it has to show 2 div with loaded data.
but in html page shows 3 divs,and the last one is empty,without data. What can it be? ho to view only 2 divs with my data? Also it shows error shown in question title.

2.homePageTemplate.html

<div class="container">
<div class="row">
    <div class="row" *ngIf="showAssigned" *ngFor="let item of contentArray">
        <div class="row assignedItem col-sm-offset-1">
            <span class="glyphicon glyphicon-plus-sign " title="sub items"></span>
            <div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
            <span class="glyphicon glyphicon-user" title="view assigned users"></span>
            <span class="glyphicon glyphicon-paperclip" title="attached docs"></span>
        </div>
    </div>
 </div>
</div>

3.Home.ts

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

import {Observable} from 'rxjs/Observable';
export class Content {
ok: boolean;
content: Array;
}
@Component({
providers: [StructureRequestService],
styleUrls: ['app/home/home.css'],
templateUrl:'./app/home/homePageTemplate.html'

})

export class HomeComponent {
 contentArray = [];
 myRes: Content;
 showAssigned:boolean = false;

constructor(private structureRequest: StructureRequestService) {}

ngOnInit() {
    this.structureRequest.sendRequest();
}

viewNodes() {
    this.myRes = this.structureRequest.result;
    this.contentArray = this.myRes.content;
    this.showAssigned = true;
    console.log(this.contentArray.length); // is 2
}
}

4.thank you in advance:)

That seems to indicate some problem in your code but I don't see anything wrong. Can you provide a Plunker to reproduce. — Günter Zöchbauer, Jun 07 '16 at 13:46
Similar to http://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error — Günter Zöchbauer, Jun 08 '16 at 07:23

Serhiy · Answer 1 · 2016-06-08T07:20:21.683

1

I've found my problem, with the 3rd empty div. As you can see,I have two directives on the same element:

<div class="row" *ngIf="showAssigned" *ngFor="let item of contentArray">

So, nrFor creates 2 div with my data, and ngIf creates one more element, with no data. this works good:

<div *ngIf="showAssigned">
    <div class="row" *ngFor="let item of contentArray"></div>
</div>

edited Jun 08 '16 at 07:20

answered Jun 08 '16 at 07:09

Serhiy

1,893
9
30
48

I missed that one. There is an open issue AFAIR to produce a proper error message. Two structural directives on the same element are not allowed. See also http://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error for a workaround where you don't need a different element (actually it needs an additional ` – Günter Zöchbauer Jun 08 '16 at 07:23

how do not view extra empty div and 'TypeError: self.context.$implicit is undefined'

1 Answers1