Angular

Question

我这里用的是angular8 有疑问写在下面

我的Json格式来自后端

rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxer", price: 72000 }
  ];

我需要像数量一样向后端发送数据

data={ make: "Toyota", model: "Celica", price: 35000, quantity: 1 }

我需要从特定行中选取数据，并且在单击特定复选框时不得允许其余行就像我在单击第 1 行后单击第 1 行复选框，然后第 2 行第 3 行必须禁用

{ make: "Toyota", model: "Celica", price: 35000}
quantity seperately
but need to be like 
{ make: "Toyota", model: "Celica", price: 35000, quantity: 1 }

我添加的图片以供参考

下面是我写的代码

Html 部分

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>



<div>
  <table border>
    <thead>
      <tr>
        <th>Sl: no</th>
        <th>Make</th>
        <th>Model</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Pick</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let a of rowData; index as i ">
        <td>{{i + 1}}</td>
        <td>{{a.make}}</td>
        <td>{{a.model}}</td>
        <td>{{a.price}}</td>
        <td> <input type="number"[formControl]="quantity"> </td>
        <td><input type="checkbox" (click)="getData(a, quantity.value)"  ></td>
      </tr>  
    <tbody>
  </table>
</div>

Ts部分

import { Component, VERSION } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  quantity = new FormControl(0);
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  getData(data, qty) {
    console.log('data in a row', data);
    console.log('Quantity', qty);
  }

  submit() {}
}

Module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

帮我解决这个问题

stackbiltz https://stackblitz.com/edit/angular-ivy-dno7uw

Answer 1

如果我理解正确，你需要做的是当一个复选框被选中时：

需要禁用所有其他复选框
提交选择的数量

那么这是一个简单的方法：

export class AppComponent  {

  name = 'Angular ' + VERSION.major;

  rowData = [];

  ngOnInit(){
    //init data
    this.rowData = this.fetchData();
  }

  fetchData(){
    let data = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];

    //need to add a 'disabled' field and a 'quantity' field to the existing data.
    //this returns a new set of data
    return data.map(row => {
      return Object.assign({}, row, {disabled:false, quantity: 0});
    });

  }

  getData(data, indexOfSelectedRow, qty) {

    //disable all other checkboxes
    this.rowData.forEach( (row, index) => {

      if(indexOfSelectedRow != index)
      {
        row.disabled = true
      }
    })

    let rowToSave = {
      make: data.make,
      model: data.model,
      price: data.price,
      quantity: +qty //+ casts a string to a number
    };

    //submit data
    this.submit(rowToSave);
  }

  submit(data) {
    console.log('save to db', data);
  }
}

并在您的模板中：

<tr *ngFor="let a of rowData; index as i ">
        <td>{{i + 1}}</td>
        <td>{{a.make}}</td>
        <td>{{a.model}}</td>
        <td>{{a.price}}</td>
        <!-- #quantity creates a local template variable, which gives us access to the input value to use in the getData method of the checkbox -->
        <td><input type="number" [value]="a.quantity" #quantity/></td>
        <td><input type="checkbox" (click)="getData(a, i, quantity.value)" [disabled]="a.disabled"/></td>
      </tr>

Angular - Formcontrolname 及其来自 Table Grid 的验证

Angular - Formcontrolname and its validation from Table Grid

javascript

form-control

ngfor

angular8