angular2实现复选框没有响应

Posted 2023-03-13

【中文标题】angular2实现复选框没有响应

【英文标题】：angular2 materialize checkbox not responding

【发布时间】：2017-12-30 14:28:57

【问题描述】：

我无法让我的复选框起作用，它们出现了，我可以单击该框，但它们没有被选中，我的 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  

【参考方案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

【讨论】：

刚刚尝试过，但没有任何改变。我还按照您的建议更新了两种方式的绑定。

@WayneRumble 可能你忘记在应用模块中添加FormsModule

不，有一个，但它与设计身份验证有关，但它应该在那里

我添加了我的 app.module.ts 但 FormsModule 在那里

@WayneRumble 检查了另一个参考答案，希望对您有所帮助

【参考方案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>