Ui 在数据表中以角度切换

问题描述

我是 angular 新手，我正在努力为每一行制作一个带有 ui 开关的数据，以改变每一行的状态（真或假），当我点击第一个开关（第 1 行）时，它会改变它的状态但是当我点击第二个开关（第 2 行）时，它也会改变第一个而不是第二个， 请帮帮我

 import { Component,OnInit } from '@angular/core';
import {HttpClient,HttpErrorResponse} from '@angular/common/http';
import {SiteService} from '../../site/site.service';
import {ModaldismissReasons,NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {Router} from '@angular/router';
import {FormBuilder} from '@angular/forms';
import {Ligne} from '../../../model/ligne';
import {Device} from '../../../model/device';
const Swal = require('sweetalert2');

@Component({
  selector: 'ngx-alldevice',templateUrl: './alldevice.component.html',styleUrls: ['./alldevice.component.scss']})
export class AlldeviceComponent implements OnInit {

  constructor(private http: HttpClient,private service: SiteService,private modalService: NgbModal,private router: Router,private form: FormBuilder) { }

  closeResult: string;
  devurl = 'http://localhost:3000/api/v1/devices/updateDevice/';
  private device: Device[];
  public data: Array<Device>;
  public data1;
  public final;
  public item;
  state: boolean;
  ok = this.http.get('http://localhost:3000/api/v1/devices/findbyuser').subscribe(data => {
    const resstR = JSON.stringify(data);
    const resJSON = JSON.parse(resstR);
    this.data = resJSON;
    this.data1 = data;
    
 onChange(event,code) {
    console.log('OnChange: ' + event) ;
    console.log('code: ' + code) ;
    this.http.patch('http://localhost:3000/api/v1/devices/updateStatebycode/' + code,{state: event} ).
    subscribe(data => { console.log(event); });
  }}

 <table class="table table-striped table-hover" >
        <thead>
        <tr>
          <th>Code</th>
          <th>Name</th>
          <th>Ligne</th>
          <th>Longitude</th>
          <th>Latitude</th>
          <th>Light Status</th>
          <th>Actions</th>
        </tr></thead>
        <tbody>
        <tr *ngFor="let hero of data1">
          <td>{{hero.code}}</td>
          <td>{{hero.name}}</td>
          <td>{{hero.ligneName}}</td>
          <td>{{hero.lng}}</td>
          <td>{{hero.lat}}</td>
          <td>
            <ui-switch size="medium" [checked]="hero.state" (change)="onChange($event,hero.code)" ></ui-switch>
          </td>
          </tr>
          </tbody>
         </table> 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）