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

【问题标题】：How to fix ngFor each row clickStatus value change when click on that row only仅在单击该行时如何修复ngFor每行clickStatus值更改
【发布时间】：2019-07-08 03:07:05
【问题描述】：

我是这个 angular6 的新手
我已经完成了使用 *ngFor 生成 div 的代码
我尝试单击每一行（跨度文本），然后该行布尔值应该会生效，但它也会更改其他行值。
我的目标是当点击跨行时，点击的行值应该改变。
组件.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

【问题讨论】：

标签： angular6 angular-ngmodel ngfor ngmodel

【解决方案1】：

好吧，您对所有行使用相同的 ngmodel 会改变每个人。如果您想这样做，请将其设置为数组。

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

这样的东西应该可以工作。

【讨论】：