angular2物化複選框沒有響應

Question

我不能讓我的複選框工作，他們出現，我可以點擊框，但他們沒有得到檢查，我的onSelect函數也沒有得到調用。我是新來的角，所以這可能是我錯過的簡單事情。

繼承人我的html：

<div *ngIf="pager.index < quiz?.questions.length"> 
    <h5 class="flow-text"><span [innerHTML]="quiz?.questions[pager.index].text"></span></h5> 
    <br> 
    <div class="row text-left"> 
    <div class="col s12 m12" *ngFor="let answer of quiz?.questions[pager.index].answers"> 
     <div class="answer"> 
     <input type="checkbox" [checked]="answer.selected" (change)="onSelect(answer);"/><label class="black-text flow-text"> {{answer.text}} </label> 
     </div> 
    </div> 
    </div> 
    <footer class="row"> 
    <div class="col s6 m6"></div> 
    <div class="col s6 m6"> 
     <div *ngIf="pager.index < quiz?.questions.length - 1"> 
     <button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Next</button> 
     </div> 
     <div *ngIf="pager.index == quiz?.questions.length - 1"> 
     <button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Finish</button> 
     </div> 
    </div> 
    </footer> 
</div> 

<div *ngIf="pager.index == quiz?.questions.length"> 
    {{ selections }} 
</div> 

這裏是component.ts

import { Component, OnInit, EventEmitter } from '@angular/core'; 
import { QuizService } from '../services/quiz.service'; 
import { Answer, Question, Quiz } from '../models/index'; 
import {MaterializeAction} from "angular2-materialize"; 

@Component({ 
    selector: 'app-quiz', 
    templateUrl: './quiz.component.html', 
    styleUrls: ['./quiz.component.sass'], 
    providers: [QuizService] 
}) 
export class QuizComponent implements OnInit { 

    quiz: Quiz; 
    pager = { 
    index: 0, 
    size: 1, 
    count: 1 
    }; 
    selections: [string] 

    constructor(private quizService: QuizService) { } 

    ngOnInit() { 
    this.loadQuiz() 
    } 

    loadQuiz() { 

    this.quizService.get().subscribe(res => { 
     this.quiz = new Quiz(res); 
     this.pager.count = this.quiz.questions.length; 
    }); 
    } 

    goTo(index: number) { 
    if (index >= 0) { 
    this.pager.index = index; 
    } 
} 

onSelect(answer: Answer) { 
    if (answer.selected = true) { 
    this.selections.splice(this.selections.indexOf(answer.text), 1); 
    } else { 
    this.selections.push(answer.text); 
    } 
    answer.selected = !answer.selected 
} 
} 

任何幫助將是偉大的，因爲香港專業教育學院嘗試一切我看過，但沒有佔上風。由於

更新：加入app.nodule.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { NgModule } from '@angular/core'; 
import { AppRoutingModule } from './app-routing.module'; 
import { MaterializeModule } from 'angular2-materialize'; 

import { Angular2TokenService } from 'angular2-token'; 
import {AuthService} from "./services/auth.service"; 
import {AuthGuard} from "./guards/auth.guard"; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { ToolbarComponent } from './toolbar/toolbar.component'; 
import { AuthDialogComponent } from './auth-dialog/auth-dialog.component'; 
import { LoginFormComponent } from './login-form/login-form.component'; 
import { RegisterFormComponent } from './register-form/register-form.component'; 
import { AboutComponent } from './about/about.component'; 
import { QuizComponent } from './quiz/quiz.component'; 
import { FooterComponent } from './footer/footer.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    ToolbarComponent, 
    AuthDialogComponent, 
    LoginFormComponent, 
    RegisterFormComponent, 
    AboutComponent, 
    QuizComponent, 
    FooterComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule, 
    MaterializeModule 
    ], 
    providers: [Angular2TokenService, AuthService, AuthGuard], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

根據這個問題：https://github.com/Dogfalo/materialize/issues/1376提問者已經注意到了這一點：

我注意到，如果他們被編碼像這樣的複選框只出現： <input type="checkbox" id="checkboxid"><label for="checkboxid">Yes?</label>

嘗試你的代碼，所以以下似乎工作得很好。我們需要爲您的複選框添加id，然後在標籤中使用for。由於您正在迭代複選框，因此我們需要設置動態的id來分隔複選框。我用這個索引。

<div class="col s12 m12" 
    *ngFor="let answer of quiz?.questions[pager.index].answers; let i = index"> 
    <div class="answer"> 
    <input type="checkbox" [id]="i" [ngModel]="answer.selected" 
     (ngModelChange)="onSelect(answer)"/> 
    <label [for]="i" class="black-text flow-text"> {{answer.text}} </label> 
    </div> 
</div> 

Answer 2

使用[ngModel]綁定與(ngModelChange)結合，使得只要您複選框值的變化，ngModelChange將調用該屬性指定的onSelect功能。無論何時您更改對象的selected標誌，[ngModel]綁定都會在UI上反映出來。

<input type="checkbox" [ngModel]="answer.selected" (ngModelChange)="onSelect(answer)"/> 

你甚至可以從你的onSelect功能跳過answer.selected = !answer.selected的一部分，如果你使用的雙向綁定風格[(ngModel)]="answer.selected"

---

#UPDATE

由於ngModel指令駐留在FormsModule你有將該模塊導入您的主要AppModule導入元數據。您可以參考Angular 2 two way binding using ngModel is not working