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

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

0 голосов
/ 14 февраля 2019
  • Я новичок в этом angular6

  • Я сделал код для генерации div с * ngFor

  • Я попытался нажать на каждую строку(span span), тогда должно действовать это булево значение строки, но оно также меняет и другие значения строки.

  • Моя цель - когда щелкните по строке диапазона, тогда это значение строки клика должно измениться.

  • 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 = Угловой!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; } }

  • Редактор моего кода: Код

1 Ответ

0 голосов
/ 15 февраля 2019

Ну, если вы используете одну и ту же модель ngmodel для всех ваших строк, это изменит всех.Если вы хотите сделать это, сделайте это как 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];
  }

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

...