Wie binde ich mehrere Kontrollkästchen in Angular2 bidirektional?

Question

Zum Beispiel habe ich ein anderes Array wie folgt:

var array = ['喜欢','不喜欢','非常喜欢','超级喜欢','喜欢得不得了'];

In HTML-Vorlage

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

Wie kann ich es umsetzen? Nach Auswahl eines der Kontrollkästchen kann der ausgewählte Inhalt in p.youselect angezeigt werden. Wenn es sich um eine Mehrfachauswahl handelt, wird er in einer Array- oder Komma-separierten Form angezeigt

Wenn ich zum Beispiel „Gefällt mir“ oder „Gefällt mir sehr“ ausgewählt habe, dann zeigt p.youselect Folgendes an:

„Gefällt mir, es gefällt mir sehr“

Sie können formArray und andere Methoden verwenden, aber ich habe sie während der Verwendung nicht implementiert. Ich hoffe, Gott kann helfen!

Answer 1

谢邀，基于你给的数据结构，但建议还是使用如下数据结构(表单提交的时候，一般提交的对应的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 class="like" *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');
  }

}

Answer 2

个人感觉不用 Forms 好像更简单吧。。。
写了一个 Fiddle: https://jsfiddle.net/phnjg6hf/4/

HTML:

<test-component></test-component>
<script id="some" 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);