Обновление углового значения таблицы 7, если повторяется другое значение таблицы - PullRequest
Новая
       8

Обновление углового значения таблицы 7, если повторяется другое значение таблицы

0 голосов
/ 14 декабря 2018

Я пытаюсь обновить другие значения ключа (синтаксический анализ массива строк JSON) в таблицу в Angular 7.1.1.обновить на основе повторения типа.Пока что я могу подключиться к веб-сокету Spring Boot Stomp, получить данные, отправив сообщение (которое является строковым), а затем данные JSON, которые необходимо проанализировать, выводятся в таблицу с помощью * ngFor.В настоящее время ключевые значения типа в таблице повторяются, и я хочу, чтобы другие значения динамически обновлялись, а столбец типа не повторял вторую итерацию.Как бы я сделал это в Angular 7?Ниже приведен мой код для app.compenent.html (template) и app.component.ts.

app.compenent.html 

        <head>
        <meta charset="utf-8">
        <title>CLOB2</title>
        <base href="/">

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      </head>

      <body>
        <div style="color: blue; text-align: center">
          <h1>{{title}}</h1>
        </div>

        <div class="container" style="width: 400px; margin-top: 20px;">

          <form class="form-inline">
            <div class="form-group">
              <label for="connect">Make Connection:</label>
              <button id="connect" class="btn btn-default" type="button" [disabled]="!disabled" (click)="connect()">Connect</button>
              <button id="disconnect" class="btn btn-default" type="submit" [disabled]="disabled" (click)="disconnect()">Disconnect</button>
            </div>
          </form>

          <form class="form-inline" style="margin-top: 20px;">
            <div class="form-group">
              <label for="name">Add Row: </label>
              <input type="text" id="message" name="message" class="form-control" [(ngModel)]="message"/>
            </div>
            <button id="send" class="btn btn-default" type="button" (click)="sendMessage()">Send</button>
          </form>

          <table id="Messages" class="table table-striped" style="margin-top: 20px;">
            <thead>
              <tr>
                <th>Messages</th>
              </tr>
            </thead>
            <tbody >
              <tr> 
                <td>type</td>
                <td>timeInMs</td>
                <td>price</td>
                <td>volume</td>
                <td>count</td>
              </tr>
              <tr *ngFor="let row of rows; index as i;"><td>{{row.type}}</td><td>{{row.timeInMs}}</td><td>{{row.price}}</td><td>{{row.volume}}</td><td>{{i}}{{row.count}}</td></tr>
            </tbody>
          </table>

        </div>

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import { BrowserModule } from '@angular/platform-browser';
import { stringify } from '@angular/core/src/util'
import { row } from './interface';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'CLOB';
  description = 'Real Time Data';
  rows: any[];
  message: string[]=[];
  disabled = true;
  private stompClient = null;

  constructor() { 

  }
  setConnected(connected: boolean) {
    this.disabled = !connected;

    if (connected) {
      this.rows= [];
    }
  }


  connect() {
    const socket = new SockJS('http://localhost:8012/app');
    this.stompClient = Stomp.over(socket);

    const _this = this;
    this.stompClient.connect({}, function (frame) {
      _this.setConnected(true);
      console.log('Connected: ' + frame);

      _this.stompClient.subscribe('/receiver/message', function (message) {
        _this.showRow(JSON.parse(message.body));
      });
    });
  }

  showRow(message) {
    this.rows.push(message);
  }

  disconnect() {
    if (this.stompClient != null) {
      this.stompClient.disconnect();
    }

    this.setConnected(false);
    console.log('Disconnected!');
  }

  sendMessage() {
    this.stompClient.send(
      '/publisher/message',
      {},
      JSON.stringify({ 'message': this.message })

    );

  }

  getData = () => Array.from(new Array(100), (val, index) => ({
    type:index.toString(),
    volume:Number
 })
  );
}
...