仅单击该行时如何修复 ngFor 每行 clickStatus 值更改

Question

对于这个 angular6 是新的
我已经完成了使用 *ngFor
我尝试点击每一行（跨度文本），然后该行的布尔值应该有效，但它也会改变其他行的值。
我的目标是当点击跨度行时，点击的行值应该改变。
component.ts

import { Component, NgModule, VERSION, Input, OnInit } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'my-app-test', template: <div> <h1>Hello</h1> <div id="{{obj.name}}" *ngFor="let obj of objList"> <span id="{{obj.name}}" (clickStatus)='false' (click)='changeColor($event, obj)'>{{obj.text}}</span>  </div> </div> , }) export class TestComponent implements OnInit { name: string; @Input() clickStatus: boolean = false; @Input() objList: any[] = []; objData = { name : 'name', text : 'text' }; list = []; constructor() { this.name =Angular！ v${VERSION.full}; } ngOnInit() { for (let i = 0; i < 10; ++i) { this.objData = { name : 'name' + i, text : 'text' + i }; this.list.push(this.objData); } console.log('data .. ', this.list); this.objList = this.list; } changeColor(event, obj) { console.log('event...', event.target as Element); console.log('obj and clickstatus ...', obj, this.clickStatus); if (this.clickStatus) { console.log('click status in if true', this.clickStatus); } else { console.log('click status in else false', this.clickStatus); } this.clickStatus = !this.clickStatus; } }
我的代码编辑器：Code

Answer 1

好吧，你对所有行使用相同的 ngmodel corse 它会改变每个人。如果你想这样做，把它做成数组。

  <div id="{{obj.name}}" *ngFor="let obj of objList;let i = index">
    <span id="{{obj.name}}" [(ngModel)]="clickStatus[i]" ngDefaultControl (click)='changeColor($event, obj,i)'>
      {{obj.text}}</span>
  </div>

 public clickStatus:Array<boolean>= new Array(this.objList.length);
  changeColor(event, obj,i) {
    console.log('event...', event.target as Element);
    console.log('obj and clickstatus ...', obj, this.clickStatus);
    if (this.clickStatus[i]) {
      console.log('click status in if true', this.clickStatus[i]);
    } else {
      console.log('click status in else false', this.clickStatus[i]);
    }
    this.clickStatus[i] = !this.clickStatus[i];
  }

像这样应该可以。

仅单击该行时如何修复 ngFor 每行 clickStatus 值更改

How to fix ngFor each row clickStatus value change when click on that row only

angular-ngmodel

ngfor

ngmodel

angular6