Bagaimana untuk mengikat berbilang kotak pilihan secara dua arah dalam angular2?

Question

Sebagai contoh, saya mempunyai tatasusunan lain seperti berikut:

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

Dalam templat html

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

Bagaimana saya boleh melaksanakannya? Selepas memilih salah satu kotak pilihan, kandungan yang dipilih boleh dipaparkan dalam p.youselect Jika ia adalah berbilang pilihan, ia akan dipaparkan dalam bentuk yang dipisahkan koma

Sebagai contoh, jika saya memilih "Suka", "Saya sangat menyukainya", maka p.youselect akan memaparkan:

"Saya suka, saya sangat menyukainya"

Anda boleh menggunakan formArray dan kaedah lain, tetapi saya tidak melaksanakannya semasa penggunaan. Saya harap Tuhan boleh membantu!

Answer 1

Terima kasih atas jemputan Berdasarkan struktur data yang anda berikan kepada saya, adalah disyorkan untuk menggunakan struktur data berikut (semasa menyerahkan borang, item id yang sepadan biasanya diserahkan):

[ 
   { name: '喜欢',  selected: true, id: 0 },
   { name: '不喜欢', selected: false, id: 1 }
]

Untuk butiran, sila rujuk - mengendalikan-berbilang-kotak semak-dalam-bentuk-sudut

Kod contoh mudah adalah seperti berikut:

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

Secara peribadi, saya rasa lebih mudah untuk tidak menggunakan Borang. . .
Menulis Biola: 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);