Question

使用本教程dynamic checkbox angular，我创建了动态复选框，并且在选中选中之后，需要更改文本标签。但是我无法解决仅在选中选定索引上需要更改文本标签的问题，目前它可以更改所有文本。这是我到目前为止尝试过的：demo，

这就是我要生产的，

在选中之前：

选择（选中的复选框）
选择
选择
选择

选中后：

已选择（更改文本标签）
选择
选择
选择

Answer 1

您正在使用一个变量marked来更改所有标签的文本。

您应使用每个控件的value对其进行更改，如以下代码所示。

<span *ngIf="order.value">
  {{orders[i].text2}}
</span>
<span *ngIf="!order.value">
  {{orders[i].text1}}
</span>

Answer 2

这可能会有所帮助：

!=

已更新：html部分：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { of } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  form: FormGroup;
  orders = [];
  marked = false;

    constructor(private formBuilder: FormBuilder) {

    this.form = this.formBuilder.group({
      orders: new FormArray([], minSelectedCheckboxes(1))
    });

    // async orders
    of(this.getOrders()).subscribe(orders => {
      this.orders = orders;
      this.addCheckboxes();
    });

    // synchronous orders
    // this.orders = this.getOrders();
    // this.addCheckboxes();
  }

   private addCheckboxes() {
    this.orders.map((o, i) => {
      const control = new FormControl(i === 0); // if first item set to true, else false
      (this.form.controls.orders as FormArray).push(control);
    });
  }

  getOrders() {
    return [
      { id: 100, name: 'order 1', text1: 'select', text2: 'selected' },
      { id: 200, name: 'order 2', text1: 'select', text2: 'selected' },
      { id: 300, name: 'order 3', text1: 'select', text2: 'selected' },
      { id: 400, name: 'order 4', text1: 'select', text2: 'selected' }
    ];
  }

    toggleVisibility(e, i) {

      console.log(e,i);
      console.log(this.orders[i]);
      console.log(this.form.controls.orders['controls'].value);
    // this.marked = e.target.checked;
    // this.form.controls.orders['controls'].text1 = 'justSelected';
        // this.form.controls.orders['controls'].text2 = 'justSelected';


//******************************************************************************* */
    if(this.form.controls.orders['controls'][i].value)
    {
      this.orders[i].text1 = 'justSelected';
    }else{
      this.orders[i].text1 = 'UnSelected';
    }
    //******************************************************************************* */
    console.log(this.form.controls.orders['controls']);
    console.log(i);
  }
}

function minSelectedCheckboxes(min = 1) {
  const validator: ValidatorFn = (formArray: FormArray) => {
    const totalSelected = formArray.controls
      .map(control => control.value)
      .reduce((prev, next) => next ? prev + next : prev, 0);

    return totalSelected >= min ? null : { required: true };
  };

  return validator;
}

Answer 3

您可以捕获（更改）事件并提醒选中的值以显示条件文本。

Stackblitz Demo

HTML文件

  <option *ngFor="let gender of aList | lookupFilter:'Gender'" [value]="gender.Id">
              {{gender.Value}}
  </option>

.ts文件

<label *ngFor="let order of orders">
  <input type="checkbox" (change)="onChecked(order)"/>
    {{ order.name }}
    <span *ngIf="(order.checked)">
      Selected
    </span>
</label>

选中复选框角度后更改文本标签

3 个答案: