Maison > interface Web > js tutoriel > le corps du texte

Exemple de code pour extraire la liste radio des composants publics dans Angular5_AngularJS

无忌哥哥
Libérer: 2018-07-12 14:26:51
original
1897 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour extraire la liste radio des composants publics dans Angular5. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Cet article vous en parlera. Liste Radio. Extraction des composants publics.

Le composant Radio List est très pratique à extraire et n'est pas aussi compliqué que Checkbox.

radio-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { RadioItem } from '../../model/radio';
import { NgModel } from '@angular/forms';
@Component({
  selector: 'app-radio-list',
  templateUrl: './radio-list.component.html',
  styleUrls: ['./radio-list.component.css']
})
export class RadioListComponent implements OnInit {
  @Input() list: RadioItem[];
  @Input() name: string;
  @Input() colNum: number = 6;
  @Input("selectModel") model: string;
  @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {
  }
  changeSelected() {
    let data = { value: this.model, name: this.name };
    this.onChange.emit(data);
  }
}
Copier après la connexion

radio-list.component.html

<p *ngIf="list" class="form-row">
  <p class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <p class="form-check abc-radio abc-radio-primary">
      <input class="form-check-input" type="radio" [value]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">
      <label class="form-check-label" for="{{name}}_{{item.id}}">
        {{item.name}}
      </label>
    </p>
  </p>
</p>
Copier après la connexion

S'inscrire dans le module référencé concerné

import { RadioListComponent } from &#39;../components/radio-list/radio-list.component&#39;;
export const routes = [
  { path: &#39;&#39;, component: xxxComponent, pathMatch: &#39;full&#39; }
];
@NgModule({
  imports: [...],
  declarations: [...
    , RadioListComponent
    , ...],
  providers: []
})
export class xxxModule {
  static routes = routes;
}
Copier après la connexion

La référence html correspondante est la suivante :

 <app-radio-list [list]="sourceArr"
         [name]="&#39;selectedSource&#39;"
         [colNum]="12"
        [(selectModel)]="selectedSource"
        (selectChange)="selectChange($event)">
 </app-radio-list>
Copier après la connexion

Suivez les étapes ci-dessus, mais le selectChange ($event) correspondant est toujours manquant :

 selectChange(model: any) {
   this[model.name] = model.value;
 }
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!