从 websockets 到 Angular mat 表的数据

Question

我一直在编写代码以通过 websockets 从我的服务器获取数据并将其显示在 Angular mat-table 中。我遇到了问题，因为表数据没有刷新。我能够在一个简单的表格中显示数据。但同样的情况并没有显示在垫表中。在其中一个博客中，我读到使用 _updateChangeSubscription / _renderChangesSubscription 但没有任何效果。我什至尝试使用@ViewChild 组件来触发数据刷新。即使这样也行不通。 下面是我的 app.compnent.html 和 app.component.ts 供参考

app.component.html

 <!-- Simple table where data is getting displayed-->
    <div>
      <table border="10">
        <thead>
          <tr>
            <th> Id</th>
            <th> Name</th>
            <th> Output </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of result">
            <th>{{ data.id }}</th>
            <td>{{ data.name }}</td>
            <td>{{ data.output }}</td>
          </tr>
        </tbody>
      </table>
    </div>

<!-- mat-table where data is not getting displayed -->

    <mat-table [dataSource]="datasource">
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> id. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.id }}  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  {{ element.name }}  </mat-cell>
    </ng-container>


    <ng-container matColumnDef="output">
      <mat-header-cell *matHeaderCellDef> Output </mat-header-cell>
      <mat-cell *matCellDef="let element">  {{ element.output }}  </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent {
  title = 'web socket example';
  private serverUrl = 'http://localhost:8080/server'
  private stompClient;
  @ViewChild(MatTable) table : MatTable<any>;


  result = [];
  displayedColumns: string[] = ['id', 'name', 'output'];
  datasource : MatTableDataSource<Element[]>;



  constructor(){
    this.initializeWebSocketConnection();
  }


 stompSucessCallBack = () =>  {

   this.stompClient.subscribe("/messages", (message) => {
    if(message.body) {      

    this.result.push(JSON.parse(message.body)); 
    this.datasource.data.push(message.body); 
    this.datasource._updateChangeSubscription;

    this.datasource._renderChangesSubscription;
    this.table.renderRows;
    console.log("******");
    console.trace(this.datasource.data);

  }
});
 }


  initializeWebSocketConnection(){
    let ws = new SockJS(this.serverUrl);
    this.stompClient = Stomp.over(ws);

    this.datasource = new MatTableDataSource();
    let that = this;
    this.stompClient.connect({}, that.stompSucessCallBack);
  }

}

packge.json

"dependencies": {
    "-": "0.0.1",
    "@angular/animations": "~9.1.7",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.7",
    "@angular/compiler": "~9.1.7",
    "@angular/core": "~9.1.7",
    "@angular/forms": "~9.1.7",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.7",
    "@angular/platform-browser-dynamic": "~9.1.7",
    "@angular/router": "~9.1.7",
    "jquery": "^3.5.1",
    "net": "^1.0.2",
    "rxjs": "~6.5.4",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.6",
    "@angular/cli": "~9.1.6",
    "@angular/compiler-cli": "~9.1.7",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }

Answer 1

我最近遇到了类似的问题。您的解决方案和我的解决方案之间存在一些差异。

首先-你的数据源初始化：

this.datasource = new MatTableDataSource<Element>([]);

在你的回调中：

let result = <Element>JSON.parse(message.body);
const datasource = this.datasource.data;
datasource.push(result);
this.datasource.data = datasource;

组件：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent {
  title = 'web socket example';
  private serverUrl = 'http://localhost:8080/server'
  private stompClient;

  displayedColumns: string[] = ['id', 'name', 'output'];
  datasource : MatTableDataSource<Element>;


  constructor(){
    this.initializeWebSocketConnection();
  }


 stompSucessCallBack = () =>  {

   this.stompClient.subscribe("/messages", (message) => {
    if(message.body) {
  
    let result = <Element>JSON.parse(message.body);
    const datasource = this.datasource.data;
    datasource.push(result);
    this.datasource.data = datasource;

  }
});
 }


  initializeWebSocketConnection(){
    let ws = new SockJS(this.serverUrl);
    this.stompClient = Stomp.over(ws);

    this.datasource = new MatTableDataSource<Element>([]);
    let that = this;
    this.stompClient.connect({}, that.stompSucessCallBack);
  }

}

如果仍然失败，则可能是映射错误...我有一个模型供我的 JSON 解析。我建议你做类似的事情。

这也可能是渲染问题，不太可能是问题，只是我们两个解决方案之间的 html 差异很小：

尝试用 th 替换 mat-h​​eader-cell：

<th  mat-header-cell *matHeaderCellDef>

和带有 td 的 mat-cell：

<td mat-cell *matCellDef="let element">