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

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

无忌哥哥

Libérer： 2018-07-12 14:26:51

original

1947 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 &#39;@angular/core&#39;;
import { RadioItem } from &#39;../../model/radio&#39;;
import { NgModel } from &#39;@angular/forms&#39;;
@Component({
  selector: &#39;app-radio-list&#39;,
  templateUrl: &#39;./radio-list.component.html&#39;,
  styleUrls: [&#39;./radio-list.component.css&#39;]
})
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!