如何修复ng对于每一行clickStatus值仅在单击该行时更改

Question

• 我是这个angular6的新手
• 我已经完成了使用* ngFor生成div的代码
• 我试图点击每一行（跨度文本）然后该行布尔值应该生效，但它也改变其他行值。
• 我的目标是点击跨度行，然后单击的行值应该更改。
• 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> 
                  <!-- [(ngModel)]="clickStatus" ngDefaultControl -->
               </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

那么，你对所有行使用相同的ng模型当然会改变每个人。如果您想这样做，请将其设为Array。

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

这样的事情应该有效。