Question

我的应用中有两个组件

APP-试样容器和 APP-单选按钮形式

我想在app-sample-container中重复使用app-radiobutton-form两次或更多次，一切都好，除了单选按钮

单选按钮状态在app-sample-container

上的所有app-radiobutton-form实例之间共享

这里是app-radiobutton-form HTML

<div class="form-inline">
    <div class="form-group">
      <label>all items are approved</label>
      <input  [value]="true" type="radio" [ngModel]="isApproved">
    </div>

    <div class="form-group">
        <label>none of items are approved</label>
        <input  [value]="false" type="radio"  [ngModel]="isApproved">
    </div>

  </div>

这是ts文件

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-radiobutton-form',
  templateUrl: './app-radiobutton-form.html',
  styleUrls: ['./app-radiobutton-form.component.scss']
})
export class RadioButtonFormComponent implements OnInit {
  isApproved: Boolean = null;
  constructor() { }
  ngOnInit() {
  }
}

及以下是app-sample-container HTML

<app-radiobutton-form #form1></app-radiobutton-form>
<app-radiobutton-form #form2></app-radiobutton-form>

当我单击form1上的单选按钮时，form2上的单选按钮也会改变。

我无法找到一个基于实例的独特无线电组按钮的简单方法 APP-单选按钮形式。

任何解决方案？

注意：问题已经简化了。

Answer 1

解决方案是将表单添加到app-radiobutton-form html标记

<form class="form-inline">
  <div class="form-group">
    <label>all items are approved</label>
    <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="true">
  </div>

  <div class="form-group">
      <label>none of items are approved</label>
      <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="false">
  </div>
  <div class="form-group">
    <label>Your bool is </label>
    {{isApproved}}
  </div>
</div>
</form>

所以现在每个单选按钮组都是单独处理的。

Answer 2

我的第一感觉：这不是一个角度问题。问题是HTML如何处理单选按钮，一旦它们在页面上呈现，就无法区分单选按钮。

您可以通过向app-radiobutton-form.html

添加一行来证明这一点

image URL NOT URL HTTP:// "XXXX"

Angular 2值是唯一的，您需要为html渲染的单选按钮设置唯一的名称和ID。

我修改了app-radiobutton-form.html，为单选按钮控件指定了唯一的名称和ID：

<label>Your bool is </label>{{isApproved}}

.ts文件为单选按钮组创建唯一ID：

<div class="form-inline">
  <div class="form-group">
    <label>all items are approved</label>
    <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="true">
  </div>

  <div class="form-group">
      <label>none of items are approved</label>
      <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="false">
  </div>
  <div class="form-group">
    <label>Your bool is </label>
    {{isApproved}}
  </div>
</div>

单选按钮在组件中分配唯一的布尔值，但它们在UI中不会作为唯一的单选按钮执行，即使名称和id属性设置唯一！

此时我会说放弃单选按钮控件并使用程式化的import { Component, OnInit, Input } from '@angular/core'; var uniqueRadioButtonId = 1; @Component({ selector: 'app-radio-button', templateUrl: './radiobutton.component.html', styleUrls: ['./radiobutton.component.css'] }) export class RadioButtonComponent implements OnInit { @Input() isApproved: Boolean; uid:string; constructor() { this.uid = "radioBtn" + (uniqueRadioButtonId++); } ngOnInit() {} }代替。

重用包含单选按钮组

2 个答案: