选中复选框后更改文本标签 angular

Question

使用本教程dynamic checkbox angular, I have create dynamic checkboxes and I need to change the text label after the the checkbox was checked. But I can't solve the problem where i need text label change on checked selected index only, for now it changes all the text. This is what i had tried so far: demo、

这就是我要制作的，

检查前：

• select（勾选复选框）
• select
• select
• select

检查后：

• selected（更改文本标签）
• select
• select
• select

Answer 1

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

你应该使用每个控件的value来改变它，就像下面的代码。

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

Answer 2

这可能会有帮助：

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;
}

已更新：html 部分：

<hello name="{{ name }}"></hello>

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="checkbox" [formControlName]="i"
    (change)="toggleVisibility($event, i)">
      <span >
       {{orders[i].text1}}
      </span>

  </label>

  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

Answer 3

您可以只捕获 (change) 事件并提醒选中的值以显示条件文本。

Stackblitz Demo

Html 文件

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

.ts 文件

import { Component } from '@angular/core';

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

  orders = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  onChecked(order) {
    order.checked = !order.checked;
  }
}