Angular 2 ngFor和ngIf

时间:2016-02-22 14:38:52

标签: angular angular2-ngmodel

我有一个下拉菜单,其中包含一个复选框和项目名称。我添加了一个ngModel来检查项目是否应该包含在项目列表中(isChecked)。视图中包含以下代码:

<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>

然后我尝试在列表中获取已检查的项目,但这似乎不起作用。我知道我做错了什么,但我无法弄清楚是什么。我在不同的地方尝试了elvis操作符,但没有一个地方可以工作,所以不是它(我认为)

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

1 个答案:

答案 0 :(得分:1)

这对我有用。请参阅此plunkr:https://plnkr.co/edit/AdhgKeXjshFUL1ruRtMJ?p=preview

我认为该项目处于最后一个循环中。你应该改用它:

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

projectdata.?LoginResponse?.ProjectVM?.isChecked不是数组......