angular2实现复选框没有响应

Question

我无法让我的复选框起作用，它们出现了，我可以单击该框，但它们没有被选中，我的 onSelect 函数也没有被调用。我是 Angular 的新手，所以这可能是我错过的一些简单的事情。

这是我的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>

这里是组件.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

将[ngModel] 绑定与(ngModelChange) 结合使用，这样每当您的复选框值更改时，ngModelChange 将调用属性中指定的onSelect 函数。每当您更改特定 answer 对象的 selected 标志时，[ngModel] 绑定都会将其反映在 UI 上。

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

如果您使用双向绑定样式[(ngModel)]="answer.selected"，您甚至可以从onSelect 函数中跳过answer.selected = !answer.selected 部分

---

#更新

由于ngModel 指令驻留在FormsModule 中，您必须将该模块导入您的主要AppModule 导入元数据。你可以参考Angular 2 two way binding using ngModel is not working

Answer 2

根据这个问题：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>