Question

我有以下Angular组件：

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3

Window {

    visible: true
    width: 500
    height: 500

    ListModel {

        id: modeloDeLista
        ListElement{
            nombre: "Articulo 1"
            precio: 5000
            descripcion: "Esto es una descripción"
        }

        ListElement{
            nombre: "Articulo 2"
            precio: 8000
            descripcion: "Esto es una descripción"
        }

        ListElement{
            nombre: "Articulo 3"
            precio: 6000
            descripcion: "Esto es una descripción"
        }
    }

    Component{

        id: vistaLista
        Rectangle{

            color: "#333"
            width: parent.parent.width
            height: 70

            RowLayout{
                Layout.fillWidth: true;
                Layout.fillHeight: true;

                Text {
                    text: qsTr("Nombre: "+nombre)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
                Text {
                    text: qsTr("Precio: "+precio)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
                Text {
                    text: qsTr("Descripcion: "+descripcion)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
            }
        }
    }

    Rectangle{
        id: contenedor
        color: "#ddd"
        anchors.centerIn: parent
        width: parent.width * 0.9
        height: parent.height * 0.9

        ListView {
            spacing: 10
            model: modeloDeLista
            delegate: vistaLista
            anchors.fill: parent
            highlightRangeMode: ItemView.NoHighlightRange
        }
    }

}

我在表格中创建了一个初始行，这已经很好了。但是当我打电话时：

import {Component, Inject} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {ChromeDataService} from "../../../../shared/services/events";


export interface Element {
  position: number;
  eventName: string;
  elementId: string;
  elementClass: string;
  location: string;
}

@Component({
  selector: 'table-basic-example',
  styleUrls: ['./table.component.scss'],
  templateUrl: './table.component.html',
})

@Inject(ChromeDataService)
export class TableBasicExample {

  displayedColumns = ['position', 'eventName', 'elementId', 'elementClass', 'url'];
  ELEMENT_DATA: Array<Element> = [{
    position: 1,
    eventName: 'click',
    elementId: 'foobar',
    elementClass: 'foobarclass',
    location: 'yahoo.com'
  }];
  dataSource = new MatTableDataSource<Element>(this.ELEMENT_DATA);

  constructor(private data:ChromeDataService){

  }

  ngOnInit() {

    console.log('events list component ngOnInit called.');

    const self = this;
    this.data.currentMessage.subscribe(m => {
      console.log('adding message to array11: ', m);
      self.ELEMENT_DATA.push(m as any);
    })

  }
}

没有新行添加到表中。我究竟做错了什么？推送到阵列后，是否必须调用某些内容来强制更新？或者也许数组在传递给MatTable构造函数时被复制，所以我可能需要在表实例上调用一个方法吗？

我试过这样做，而不是：

self.ELEMENT_DATA.push(m as any);

但这也没有做任何事情

强制MatTable呈现新行

0 个答案: