0

Estou tentando passar a quantidade de elementos de um array para uma variável em TypeScript que alimentará a propriedade de valor de um Gauge(velocímetro). Testei colocar a chamada do método que faria essa contagem de elementos no html para quando ele percorresse cada funcionário, passasse o funcionário da vez como parâmetro e retornasse array.lenght, porém no console não imprime o valor do atributo que receberia o tamanho do array (a variável contaProducao). Preciso pegar o tamanho do array de produção de cada funcionário. Alguém pode me ajudar? Estou usando Angular versão 7. Esse é o meu componente:

export class DataBindingComponent implements OnInit {

  contaProducao: number = 0;
  quantidadeProcesso: number[];

  gaugeType = "semi";
  gaugeValue = this.contaProducao;
  gaugeLabel = "Speed";
  gaugeAppendText = "km/hr";

  thresholdConfig = {
    '0': {color: 'green'},
    '40': {color: 'orange'},
    '75.5': {color: 'red'}
};

  funcionario: Model[] = [];
  novoFuncionario: Model;
  novoFuncionario1: Model;
  novaProducao: Producao;
  novaProducao1: Producao;
  novaProducao2: Producao;
  novaProducao3: Producao;
  novaProducao4: Producao;
  producaoTotal: Producao[];
  
  criaElemento(){

     this.novoFuncionario = new Model();
     this.novoFuncionario.id = 1
     this.novoFuncionario.matricula ="123456"
     this.novoFuncionario.nome= "a"
     this.novoFuncionario.uorNome = "cenop"
     this.novoFuncionario.producao = [this.novaProducao, this.novaProducao1]

     this.novoFuncionario1 = new Model();
     this.novoFuncionario1.id = 2
     this.novoFuncionario1.matricula = "555"
     this.novoFuncionario1.nome = "b"
     this.novoFuncionario1.uorNome = "cenop"
     this.novoFuncionario1.producao = [this.novaProducao2, this.novaProducao3, this.novaProducao4]

     console.log(this.novoFuncionario);
     console.log(this.novoFuncionario1);
  }

  criaProducao(){

    this.novaProducao = new Producao();
    this.novaProducao.id = 1
    this.novaProducao.matricula = "123456";
    this.novaProducao.meta = "18";
    this.novaProducao.nome = "a";
    this.novaProducao.quantidade = 2

    this.novaProducao1 = new Producao();
    this.novaProducao1.id = 2
    this.novaProducao1.matricula = "123456";
    this.novaProducao1.meta = "20";
    this.novaProducao1.nome = "a";
    this.novaProducao1.quantidade = 3

    this.novaProducao2 = new Producao();
    this.novaProducao2.id = 3
    this.novaProducao2.matricula = "555";
    this.novaProducao2.meta = "10";
    this.novaProducao2.nome = "b";
    this.novaProducao2.quantidade = 8

    this.novaProducao3 = new Producao();
    this.novaProducao3.id = 4
    this.novaProducao3.matricula = "555";
    this.novaProducao3.meta = "8";
    this.novaProducao3.nome = "b";
    this.novaProducao3.quantidade = 12

    this.novaProducao4 = new Producao();
    this.novaProducao4.id = 5
    this.novaProducao4.matricula = "555";
    this.novaProducao4.meta = "8";
    this.novaProducao4.nome = "b";
    this.novaProducao4.quantidade = 12

    console.log(this.novaProducao);
    console.log(this.novaProducao1);
    console.log(this.novaProducao2);
    console.log(this.novaProducao3);
  }

  adicionaElemento(){
    this.funcionario.push(this.novoFuncionario, this.novoFuncionario1);
    console.log(this.funcionario);

    this.producaoTotal.push(this.novaProducao, this.novaProducao1, this.novaProducao2, this.novaProducao3, this.novaProducao4)
  }

  //funcionarioVez : Model;
  percorreProducao(funcionario: Model){

    this.contaProducao = this.producaoTotal.filter(f => f.matricula == funcionario.matricula).length;    

  }

  constructor() { }

  ngOnInit() {
    this.criaElemento();
    this.criaProducao();
    this.adicionaElemento();
    this.percorreProducao;

    this.contaProducao = 0;
    console.log(this.contaProducao)
    //console.log(this.quantidadeProcesso)
  }

Meu HTML:

<div class="container">
      <div class="row">
        <div class="col" *ngFor="let funcionario of funcionario">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Funcionario</h5>
              <p class="card-text">{{ funcionario.id }}</p>
              <p class="card-text">{{ funcionario.nome }}</p>
              <p class="card-text">{{ funcionario.uorNome }}</p>
              <p class="card-text">{{ funcionario.matricula }}</p>
              <p class="card-text">{{ percorreProducao}}</p>
              <p class="card-text">{{ contaProducao }}</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
              <ngx-gauge [type]="gaugeType" 
              [value]="gaugeValue" 
              [label]="gaugeLabel"  
              [append]="gaugeAppendText">
              </ngx-gauge>
              <ngx-gauge [thresholds]="thresholdConfig"></ngx-gauge>
            </div>
          </div>
      </div>
      </div>
      </div>

Model:

export class Model {
    id:number;
    matricula: string;
    nome: string;
    uorNome: string;
    producao: Producao[];
}
export class Producao{
    id: number;
    matricula: string;
    nome: string;
    quantidade: number;
    meta: string;
}

O console não apresenta erro.

2 Respostas 2

0

Você declarou gaugeValue no componente com o valor inicial de this.contaProducao, que no momento da construção é 0, porém você nunca atualiza esse gaugeValue

Além disso, só escrever o nome da função no HTML não vai chamar ela para o seu funcionário.

Ao invés disso, você pode passar as chamadas direto no HTML:

<!-- <p class="card-text">{{ percorreProducao}}</p> -->
<ng-container *ngIf="producaoTotal.filter(f.matricula === funcionario.matricula).length; let producoesCount">
<!-- Este ng-container permite reusarmos o calculo do producaoTotal
     Idealmente, você deveria criar um pipe para otimizar isso -->
    <p class="card-text">{{ producoesCount }}</p>
    <p class="card-text">{{ contaProducao }}</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
    <!-- Note o producoesCount aqui no gauge -->
    <ngx-gauge [type]="gaugeType" 
          [value]="producoesCount" 
          [label]="gaugeLabel"  
          [append]="gaugeAppendText">
    </ngx-gauge>
    <ngx-gauge [thresholds]="thresholdConfig"></ngx-gauge>
</ng-container>

Sua funcao percorreProducao também pode ser removida.

1
  • Obtive esse erro na linha de comando do *ngIf do html: ERROR TypeError: Cannot read property 'matricula' of undefined. Mas consegui fazendo de outra forma, usei no valueGauge = funcionario.producao.length. Obrigada pela ajuda. :) 25/07/2019 às 2:15
-2

Acredito que uma maneira prática e fácil de iterar é utilizando framework.

Tente iterar utilizando https://lodash.com/docs#forEach

é um framework muito fácil de implementar e utilizar. No site existem vários exemplos.

_.forEach([1, 2], function(value) { console.log(value); });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .