Search code examples
angularangular2-ngmodel

Angular 2 ngFor and ngIf


I have a dropdown menu which contains a checkbox and the name of projects. I added an ngModel to check if the project should be included in a list of projects (isChecked). The following code is in the view:

<div id="dropdown-menu">
        <button id="show-users" (click)="showMenu = !showMenu">Project toevoegen</button> 
        <div id="drp-project-select">
            <div class="scroller" [hidden]="!showMenu">
                <div id="search-wrapper">
                    <i class="fa fa-search"></i>
                    <input [(ngModel)]="searchTerm" type="text" placeholder="Zoek op naam..." >
                </div>   
                <ul>
                    <li *ngFor="#project of projectdata.LoginResponse?.ProjectVM, #i = index">
                        <label class="checkbox-label" >
                            <input type="checkbox" class="dropdown-checkbox" [(ngModel)]="project.isChecked" >
                            <span>{{project.Project}}</span>
                        </label>
                    </li>
                </ul>


            </div>
        </div>
    </div>

I then try to get the checked items in a list but that doesn't seem to work. I know I am doing something wrong but I cannot figure out what. I tried the elvis operator on different places, but none of the places work so that's not it (I think)

<ul>
    <li *ngFor="#checked of projectdata.?LoginResponse?.ProjectVM?.isChecked">
            <span>{{checked}}--</span>
    </li>
</ul> 

Solution

  • This works for me. See this plunkr: https://plnkr.co/edit/AdhgKeXjshFUL1ruRtMJ?p=preview.

    I think the project is in the last loop. You should use this instead:

    <ul>
      <li *ngFor="#project of projectdata.?LoginResponse?.ProjectVM">
        <span *ngIf="project.isChecked">{{checked}}--</span>
      </li>
    </ul>
    

    projectdata.?LoginResponse?.ProjectVM?.isChecked isn't an array...