1
resposta

Como salvar itens selecionados por checkbox em Angular 2.

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()));
    }
  }

}
1 resposta

Fala Jairo Henrique, tudo bom cara?

Consegue subir o código do seu projeto no Github para eu dar uma solução mais assertiva e focada no seu código? :)