Please help me refactor a piece of code. I got the data from json and built a tablet based on it. After clicking on a certain cell, a plate displays a modal window with information about the cell on which the click occurred.

Here is the component code:

export class AppComponent implements OnInit { private participants: Participant[] = []; private GENDERS: Object = { 0: 'female', 1: 'male', 2: 'android' }; constructor(private http: Http) { this.participants = localStorage.participants ? JSON.parse(localStorage.participants) : []; //console.log(this.participants); }; ngOnInit() { this.getParticipants(); }; private getParticipants(): void { let result: any; if(this.participants.length != 0) { console.log('empty', this.participants); } else { //console.log('full'); this.http.get(Config.host + 'assets/json/participants.json').subscribe( data => { //console.log(data); let participantsRaw = JSON.parse(data['_body']); let participants: any[] = []; for(var prop in participantsRaw) { if (!participantsRaw.hasOwnProperty(prop)) continue; participants.push(participantsRaw[prop]); } this.participants = participants; console.log('this.participants', this.participants); }, err => { console.log('err') }); } }; private handlerClick(event): void { let tagName = event.target.tagName let elId = (tagName == 'SPAN') ? event.target.parentElement.id : event.target.id; let rowId = elId.split('_')[1]; let colId = elId.split('_')[2]; console.log(elId, rowId, colId); prompt('Введите свойство ' + colId + ' для участника с ID=' + rowId); }; }

Here is the template code:

 <table class="table"> <tbody class="body" (click)="handlerClick($event)"> <tr *ngFor="let p of participants; let i = index;" id="line_{{ p?.id }}"> <td class="col-0" id="line_{{ p?.id }}_{{ p?.id }}">{{ p?.id }}</td> <td class="col-names" id="line_{{ p?.id }}_names"> <span>{{ p?.fname }}</span> <span>{{ p?.mname }}</span> <span>{{ p?.lname }}</span> </td> <td class="col-position" id="line_{{ p?.id }}_position">{{ p?.position }}</td> <td class="col-gender" id="line_{{ p?.id }}_gender">{{ GENDERS[p?.gender] }}</td> <td class="col-married" id="line_{{ p?.id }}_married">{{ p?.married ? 'yes' : 'no' }}</td> <td class="col-city" id="line_{{ p?.id }}_city">{{ p?.city }}</td> </tr> </tbody> </table>

The result looks like this .

The problem is that I used native JavaScript in the handler handlerClick() click handler. And I would like to use the means of an angular only.

Show how you can rewrite handlerClick() . You may have to make changes to the markup, it also suits me.

If necessary, all the sources here .

    1 answer 1

    Hang the handler not on the whole table and pass the necessary data to the function without calling the id

      private handlerClick(rowId, colId): void { prompt('Введите свойство ' + colId + ' для участника с ID=' + rowId); }; 
     <table class="table"> <tbody class="body"> <tr *ngFor="let p of participants; let i = index;" id="line_{{ p?.id }}"> <td class="col-0" id="line_{{ p?.id }}_{{ p?.id }}" (click)="handlerClick(p.id, 'id')">{{ p?.id }}</td> <td class="col-names" id="line_{{ p?.id }}_names" (click)="handlerClick(p.id, 'names')"> <span>{{ p?.fname }}</span> <span>{{ p?.mname }}</span> <span>{{ p?.lname }}</span> </td> <td class="col-position" id="line_{{ p?.id }}_position" (click)="handlerClick(p.id, 'position')">{{ p?.position }}</td> <td class="col-gender" id="line_{{ p?.id }}_gender" (click)="handlerClick(p.id, 'gender')">{{ GENDERS[p?.gender] }}</td> <td class="col-married" id="line_{{ p?.id }}_married" (click)="handlerClick(p.id, 'married')">{{ p?.married ? 'yes' : 'no' }}</td> <td class="col-city" id="line_{{ p?.id }}_city" (click)="handlerClick(p.id, 'city')">{{ p?.city }}</td> </tr> </tbody> </table>

    PS id="line_{{ p?.id }}_{{ p?.id }}" - I think, "Enter property 131 for a participant with ID = 131" is not what you need

    • Put a tick because the problem was formally solved, but the solution is not DRY - cyklop77