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对象的answer标记时，[ngModel]绑定都会在UI上反映出来。

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

如果您使用双向绑定样式answer.selected = !answer.selected

，您甚至可以跳过onSelect函数中的[(ngModel)]="answer.selected"部分

<强> #UPDATE

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

angular2 materialize复选框未响应

2 个答案: