更新

Question

我想用*ngfor创建几个单选按钮。

<div class="gruendeAll">
<div class="gruende" *ngFor="let item of data">
  <label for="radiogrund{{item.grund}}">
    <input id="radiogrund{{item.grund}}" [value]='item.grund' value="grundValue" type="radio" name="grund" [(ngModel)]="form" class="select">
    {{item.grund}}
  </label>
</div>
</div>

按钮应该位于网格中，因此这是我的.css

.gruende {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2px;
  align-items: center;
}

.gruende input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.gruende label {
  display: table-cell;    /* set Text in vertical center (with vertical align) */
  vertical-align: middle;
  text-align: center;     /* set Text in horizontal center */
  font-size: 100%;
  font-family: Tahoma;
  background-color: #424249;
  color: white;
  width: 205px;
  height: 80px;
  border-radius: 10px;
}

.gruende input[type="radio"]:checked + label {
  background-color: #969699;
}

不幸的是，这些按钮位于彼此之间，而不位于网格中（例如3x3）。我使用10倍<input type="radio">进行了尝试，并且在这里有效。因此，我认为问题与*ngfor有关。另外，我无法选择按钮，但单击按钮却什么也没发生（按钮应更改其颜色，如.css中所述）

顺便说一句，我正在从数据库中取出单选按钮的data（我有一个Spring Boot连接）。所以我想动态创建更多按钮。

在这里我订阅data：

 this.vorgangService.getGruende().subscribe(res => {
      this.data = res;

      this.grund = data.grund;

      this.size = this.data.length;
    });

.ts中也有一个表单组

form: FormGroup = this.formBuilder.group( {

  });

Answer 1

我认为该问题可能是静态属性id和for，请尝试使用动态[id]和[for]。此外，您还可以在输入中混合其他动态和静态属性。

 <label [for]="radiogrund{{item.grund}}">
<input [id]="radiogrund{{item.grund}}"

Answer 2

这里是使用FormGroup或Reactive表单的一种方法：

https://stackblitz.com/edit/angular-rvpjjb

HTML

<form [formGroup]="myForm">
    <div class="gruende">
        <div class="gruende" *ngFor="let item of data">
            <label class="gruende__label" [class.gruende__label--checked]="radio.checked" [for]="'radiogrund-'+item.grund">
            {{item.grund}}
    <input #radio  [id]="'radiogrund-'+item.grund" 
            type="radio" 
            class="select" 
            formControlName="myRadioInput" 
            [value]="item.grund">
  </label>
        </div>
    </div>

    <p>Form value: {{ myForm.value | json }}</p>
</form>

组件

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  data = [
    { grund: "1" },
    { grund: "2" },
    { grund: "3" },
    { grund: "4" }
  ];

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm(): void {
    this.myForm = this._fb.group({
      myRadioInput: []
    });
  }
}

CSS

.gruende {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2px;
  align-items: center;
}

.gruende input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.gruende__label {
  display: table-cell;    /* set Text in vertical center (with vertical align) */
  vertical-align: middle;
  text-align: center;     /* set Text in horizontal center */
  font-size: 100%;
  font-family: Tahoma;
  background-color: #424249;
  color: white;
  width: 205px;
  height: 80px;
  border-radius: 10px;
}

.gruende__label--checked {
    background-color: #969699;
}

更新

要将类别添加到选中的单选按钮，您可以添加角度模板参考变量<input #radio ...，然后在标签上根据是否选中[class.gruende__label--checked]="radio.checked"

切换类别

动态生成的单选按钮的问题（角度* ngfor）

2 个答案:

HTML

组件

CSS

更新