No HTML, apresento todas as informações através do serviço Rest, organizo tudo numa tabela, na mesma tabela preciso selecionar alguns itens, salvar num objeto e usar apenas esses itens selecionados em outro componente (outra página), o formato de seleção é por meio de checkbox. Além disso, assim que voltar ao menu de seleção, gostaria de resgatar as informações como estavam, com checked ou não. Tentei algumas formas, porém sem sucesso :/
<section class="content-header">
<h3>{{ 'activegoal.title' | translate }} <small> {{ 'activegoal.subtitle' | translate }}</small></h3>
</section>
<section class="content">
<div style="padding-top: 30px">
<div class="box box-warning">
<div class="box-header with-border table-head">
<table class="table table-condensed">
<thead>
<tr>
<td class="col-md-2 col-xs-2" style="color: white"></td>
<td class="col-md-2 col-xs-2 text-align">{{'goal.direction' | translate }}</td>
<td class="col-md-2 col-xs-2 text-align">{{'goal.annualTarget' | translate }}</td>
<td class="col-md-2 col-xs-2 text-align">{{'goal.med' | translate }}</td>
<td class="col-md-2 col-xs-2 text-align">{{'goal.indicator' | translate }}</td>
<td class="col-md-2 col-xs-2 text-align">{{'goal.segment' | translate }}</td>
</tr>
</thead>
</table>
</div>
<div class="box-body">
<table id="goalsTable" class="table table-bordered table-hover">
<tbody>
<tr *ngFor="let goal of goals | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="col-md-1 col-xs-1"><input type="checkbox" [checked]="goal.planningId === planningId" (change)="$event.target.checked? (goal.planningId = planningId) : (goal.planningId = 0)"></td>
<td class="col-md-2 col-xs-2">{{ goal.direction | translate }}</td>
<td class="col-md-2 col-xs-2" *ngIf="!goal.target">{{ 'goal.notarget' | translate }} </td>
<td class="col-md-2 col-xs-2" *ngIf="goal.target">{{ goal.target.annualTarget | translate }}</td>
<td class="col-md-2 col-xs-2">{{ goal.measurement | translate }}</td>
<td class="col-md-2 col-xs-2">{{ goal.indicator | translate }}</td>
<td class="col-md-2 col-xs-2">{{ goal.segment | translate }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<pagination-controls class="pagination-controls" (pageChange)="p = $event"></pagination-controls>
</div>
<button class="btn btn-warning" (click)="verifyChecked()">Finalizar</button>
</section>
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Goal } from 'app/model/goal';
import { GoalService } from 'app/service/goal/goal.service';
@Component({
selector: 'app-activegoals',
templateUrl: './activegoals.component.html',
styleUrls: ['./activegoals.component.css']
})
export class ActivegoalsComponent implements OnInit {
goals: Goal[] = new Array();
errorMessage: string;
planningId: number;
constructor(private service: GoalService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
this.getActiveGoals();
if (this.route.snapshot.paramMap.get('planningId') !== null) {
this.planningId = +this.route.snapshot.paramMap.get('planningId');
} else {
console.log('not planning id passed');
}
}
getActiveGoals() {
this.service.getGoals().subscribe(
success => this.goals = success,
error => <any>error);
}
verifyChecked() {
for (let goal of this.goals) {
console.log('goalId: '.concat(goal.goalId.toString()).concat(' planningId: ').concat(goal.planningId.toString()));
}
}
}