我是 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>