Comment lier plusieurs cases à cocher de manière bidirectionnelle dans angulaire2 ?

Question

Par exemple, j'ai un autre tableau comme suit :

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

Dans le modèle HTML

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

Comment puis-je l'implémenter ? Après avoir coché l'une des cases, le contenu sélectionné peut être affiché dans p.youselect, il sera affiché sous forme de tableau ou séparé par des virgules

.

Par exemple, si j'ai sélectionné "J'aime", "Je l'aime beaucoup", alors p.youselect affichera :
"Je l'aime, je l'aime beaucoup"

Vous pouvez utiliser formArray et d'autres méthodes, mais je ne l'ai pas implémenté pendant l'utilisation. J'espère que Dieu pourra vous aider !

Answer 1

Merci pour l'invitation. En fonction de la structure de données que vous m'avez donnée, il est recommandé d'utiliser la structure de données suivante (lors de la soumission du formulaire, l'élément d'identification correspondant est généralement soumis) :

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

Pour plus de détails, veuillez vous référer à - gestion-de-plusieurs-cases-à-cocher-dans-des-formes-angulaires

L'exemple de code simple est le suivant :

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

Personnellement, j'ai l'impression qu'il est plus facile de ne pas utiliser Forms. . .
Écrit un violon : 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);