javascript - angular2如何雙向綁定多個checkbox？

問題描述

比如我又一個數組如下：

var array = [’喜歡’,’不喜歡’,’非常喜歡’,’超級喜歡’,’喜歡得不得了’];

html模板中

<p *ngFor='let e of array'> <input type='checkbox' name='like' value='{{e}}'></p><p class='youselect'></p>

我蓋如何實現，選中其中一個checkbox后，能在p.youselect中顯示出我已經選中的內容，如果是多選，則呈現出數組或者以逗號隔開的形式

比如我選中了“喜歡”，“喜歡得不得了”，那么p.youselect中則顯示出：“喜歡，喜歡得不得了”

可以使用formArray等方式進行，但是我在使用過程中都沒有實現。希望大神出手幫幫忙！

問題解答

謝邀，基于你給的數據結構，但建議還是使用如下數據結構(表單提交的時候，一般提交的對應的id項)：

[ { name: ’喜歡’, selected: true, id: 0 }, { name: ’不喜歡’, selected: false, id: 1 }]

具體可以參考 - handling-multiple-checkboxes-in-angular-forms

簡單的示例代碼如下：

import { Component, OnInit } from ’@angular/core’;import { FormBuilder, FormGroup } from ’@angular/forms’;@Component({ selector: ’my-app’, template: ` <form [formGroup]='myForm'> <p *ngFor='let like of likes.controls; let i = index;' > <input type='checkbox' [formControl]='like'> {{likesArr[i]}} </p> <p class='youselect'>{{selects}}</p> </form> `,})export class AppComponent implements OnInit{ myForm: FormGroup; likesArr: string[] = [’喜歡’,’不喜歡’,’非常喜歡’,’超級喜歡’,’喜歡得不得了’]; selects: string[] = [’喜歡’]; constructor(private fb: FormBuilder) {} ngOnInit() { this.myForm = this.fb.group({ likes: this.fb.array([true, false, false, false, false]) }); this.likes.valueChanges.subscribe(values => { let selects: string[] = []; values.forEach((selected: boolean ,i: number) => {selected === true && selects.push(this.likesArr[i]) }); this.selects = selects; }); } get likes () { return this.myForm.get(’likes’); }}回答2：

個人感覺不用 Forms 好像更簡單吧。。。寫了一個 Fiddle: https://jsfiddle.net/phnjg6hf/4/

HTML:

<test-component></test-component><script type='text/plain'> <p>Result: {{result()}}</p> <p *ngFor='let w of arr'><label> <input type='checkbox' value='{{w}}' [checked]='selections[w]' (change)='handle($event)' /> {{w}}</label> </p></script>

JS:

var Thing = ng.core.Component({ selector: 'test-component', template: document.getElementById('some').innerHTML})(function () { this.selections = { First: true }; this.arr = ['First', 'Second', 'Third'];});Thing.prototype.result = function () { var that = this; return this.arr.filter(function (x) {return that.selections[x]; }).join(', ');};Thing.prototype.handle = function (e) { var t = e.target, v = t.value, c = t.checked; this.selections[v] = c;};var AppModule = ng.core.NgModule({ imports: [ng.platformBrowser.BrowserModule], declarations: [Thing], bootstrap: [Thing], providers: []})(function () { });ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule);