Question

早安！，

我是angular和signalR的新手，我想要实现的是，在接收到signalR的消息后刷新表。我已经确认可以收到该消息，但是问题是我需要重新加载表。所以我要做的是，在取消了order.component的消息后，我调用了loadData。不幸的是没有运气。收到signalR的更新后，如何重新加载表。

下面是我的order.component.ts。

import { Component, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html'
})

@Injectable()
export class OrdersComponent {
  private orders : IOrder[];
  private products: IProduct[];
  private cart: any[] = [];
  private orderNumber: string;

  constructor(private http: HttpClient) {

    http.get<IOrder[]>('http://localhost:63754/api/v1/order/1').subscribe(result => {
      this.orders = result;
    }, error => console.error(error));
  }

  public loadData(http: HttpClient) {
    http.get<IOrder[]>('http://localhost:63754/api/v1/order/1').subscribe(result => {
      this.orders = result;
    }, error => console.error(error));


  }

  public onSelect(selectedItem: any) {

    this.http.get<IProduct[]>('http://localhost:63754/api/v1/product/list').subscribe(result => {
      this.products = result;
    }, error => console.error(error));

    this.orderNumber = selectedItem.orderNumber;
  }

  public onSelectUpdate(selectedItem: any) {

    this.cart.forEach((value, index, array) => {

      if (value.productId === selectedItem.productId) {
        array.splice(index, 1);
      }

    });


    this.cart.push(selectedItem);
  }

  public submit() {

    let request: any = {
      orderNumber: this.orderNumber,
      customerId: 1,
      products: this.cart
    };


    this.http.put('http://localhost:63754/api/v1/order/update', JSON.stringify(request),
      {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }).subscribe(result => {
      //do nothing
    }, error => console.error(error));

    this.cart = [];
    this.products = null;
  }
}

interface IOrder {
  orderId: number;
  customerId: number;
  orderNumber: string;
  orders: any[];
  orderDate: any;
  isProcessed: boolean;
}

interface IProduct {
  productId: number;
  name: string;
  description: string;
  quantity: number;
}

下面是我的app.component.ts。

import { Component } from '@angular/core';
import { OrdersComponent } from './orders/orders.component';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import * as signalR from '@aspnet/signalr';

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


export class AppComponent  {
  title = 'app';

  constructor(private order: OrdersComponent, private http: HttpClient) { }

  ngOnInit(): void {
    const connection = new signalR.HubConnectionBuilder().configureLogging(signalR.LogLevel.Information)
      .withUrl("http://localhost:50772/notify")
      .build();

    connection.start().then(function () {
      console.log('Connected!');
    }).catch(function (err) {
      return console.error(err.toString());
    });

    connection.on("BroadcastMessage", (type: string, payload: string) => {
      alert('received'); 
      this.order.loadData(this.http); //<-- problem
    });
  }
}

我的HTML。

<table class='table table-striped' *ngIf="orders">
  <thead>
    <tr>
      <th></th>
      <th>OrderNumber</th>
      <th>OrderDate</th>
      <th>Orders</th>
      <th>IsProcessed</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let order of orders">
      <td>
        <button type="button" (click)="onSelect(order)" style="margin:5px;" class="btn btn-info">Modify</button>
        <button type="button" (click)="onSelect(order)" style="margin:5px;" class="btn btn-danger">Cancel</button>
      </td>

      <td>{{ order.orderNumber }}</td>
      <td>{{ order.orderDate }}</td>
      <td>
        <div *ngFor="let c of order.orders">
          <label>{{ c.quantity }}</label> - <label>{{ c.name }}</label>
        </div>
      </td>
      <td>{{ order.isProcessed }}</td>
    </tr>
  </tbody>
</table>

Answer 1

您的问题出在connection.on上。您将收到一个类型和一个有效负载，然后将this.http数据传递给您的方法。因此，您需要或映射接收到的负载，或者如果接收到的负载是表类型，则直接将其传递。

connection.on("BroadcastMessage", (type: string, payload: string) => {
      alert('received'); 
      this.yourHtmlType = this.mapToMyType(payload);
      this.order.loadData(this.this.yourHtmlType);
    });

或

connection.on("BroadcastMessage", (type: string, payload: string) => {
      alert('received'); 
      this.order.loadData(this.payload);
    });

从signalR更新后如何重新加载表

1 个答案: