Как исправить изменение значения clickStatus для каждой строки при нажатии только на эту строку

  • Я новичок в этом angular6

  • Я сделал код для создания div с помощью * 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> <!-- [(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; } }

  • Мой редактор кода: Код


ngmodel ngfor angular6 angular-ngmodel
person kks    schedule 14.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, использование одной и той же модели ng для всех ваших рядов корса изменит всех. Если вы хотите сделать это так, сделайте это как массив.

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

что-то вроде этого должно работать.

person Talg123    schedule 15.02.2019