When adding items to the array it does not update the mtx-grid data table.
{
"name": "ng-matero",
"version": "0.0.0-NOT-USED",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"e2e": "ng e2e",
"build": "ng build",
"build:prod": "ng build --prod",
"build:release": "ng build --prod --baseHref=/ng-matero/",
"build:schematics": "npm run copy:schematics && cd schematics && npm run build && cd .. && npm run build:starter",
"build:starter": "gulp --gulpfile gulpfile.js",
"copy:schematics": "npm run clean:schematics && cpr schematics dist/schematics",
"clean:schematics": "rimraf dist/schematics",
"lint": "npm run lint:ts && npm run lint:scss",
"lint:ts": "tslint -p tsconfig.app.json -c tslint.json 'src/**/*.ts'",
"lint:scss": "stylelint --syntax scss 'src/**/*.scss' --fix",
"hmr": "ng serve --hmr -c hmr --disable-host-check",
"deploy": "angular-cli-ghpages --no-silent --dir=dist/ng-matero",
"release": "npm run build:release && npm run deploy",
"publish": "npm run build:schematics && cd dist/schematics && npm publish",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.8",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.0.8",
"@angular/compiler": "~10.0.8",
"@angular/core": "~10.0.8",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "~10.0.8",
"@angular/localize": "^10.0.8",
"@angular/material": "~10.1.3",
"@angular/material-moment-adapter": "^10.1.3",
"@angular/platform-browser": "~10.0.8",
"@angular/platform-browser-dynamic": "~10.0.8",
"@angular/router": "~10.0.8",
"@mat-datetimepicker/core": "^5.0.1",
"@mat-datetimepicker/moment": "^5.0.1",
"@ng-matero/extensions": "^10.5.1",
"@ng-select/ng-select": "^5.0.0",
"@ngx-formly/core": "^5.9.3",
"@ngx-formly/material": "^5.9.3",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"apexcharts": "^3.20.0",
"core-js": "^3.6.4",
"crypto-js": "^3.3.0",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"ngx-mask": "^10.0.1",
"ngx-permissions": "^8.0.0",
"ngx-progressbar": "^6.0.3",
"ngx-toastr": "^13.0.0",
"photoviewer": "^3.4.0",
"rxjs": "~6.5.5",
"screenfull": "^5.0.2",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.5",
"@angular/cli": "~10.0.8",
"@angular/compiler-cli": "~10.0.8",
"@angular/language-service": "~10.0.8",
"@angularclass/hmr": "^2.1.3",
"@commitlint/cli": "^9.1.2",
"@commitlint/config-conventional": "^9.1.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@types/parse5": "~5.0.2",
"angular-cli-ghpages": "^0.6.2",
"chalk": "^3.0.0",
"codelyzer": "^6.0.0",
"cpr": "^3.0.1",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-each": "^0.5.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.2.11",
"parse5": "~5.1.1",
"prettier": "^2.0.5",
"protractor": "~7.0.0",
"rimraf": "^3.0.2",
"stylelint": "^13.6.1",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.7"
}
}<mtx-grid [data]="productsTable" [columns]="columns" [loading]="isLoading"
[multiSelectable]="multiSelectable"
[rowSelectable]="rowSelectable" [hideRowSelectionCheckbox]="hideRowSelectionCheckbox"
[rowHover]="rowHover"
[rowStriped]="rowStriped" [showToolbar]="showToolbar" [toolbarTitle]="'Data Grid Toolbar'"
[columnHideable]="columnHideable" [columnMovable]="columnMovable"
[expandable]="expandable"
[expansionTemplate]="expansionTpl" [pageOnFront]="showPaginator"
[showPaginator]="showPaginator"
[pageSizeOptions]="[10,50,100]" [pageIndex]="0" [pageSize]="10"
(sortChange)="changeSort($event)"
(selectionChange)="changeSelect($event)">
</mtx-grid>
<ng-template #expansionTpl let-row>
{{row.name}}
</ng-template>import {FormBuilder, FormGroup} from '@angular/forms';
import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {ProductService} from "../../../../services/registrations/product.service";
import {ToastrService} from "ngx-toastr";
import {distinctUntilChanged} from "rxjs/operators";
import {MtxGridColumn} from "@ng-matero/extensions";
import {Person, TablesDataService} from "../../data.service";
import {DeschargeService} from "../../../../services/moviment/descharge.service";
import {MtxDialog} from "@ng-matero/extensions/dialog";
import {MAT_DIALOG_DATA} from "@angular/material/dialog";
@Component({
selector: 'app-table-kitchen-sink-edit',
styleUrls: ['./edit.component.scss'],
templateUrl: './edit.component.html',
providers: [TablesDataService, ProductService, DeschargeService]
})
export class MovimentDeschargesEditComponent implements OnInit {
reactiveForm: FormGroup;
columns: MtxGridColumn[] = [
{header: 'Código', field: 'id', sortable: true},
{header: 'Descrição', field: 'description', width: "400px", sortable: true},
{header: 'Quantidade', field: 'quantity'},
{
header: 'Opções',
field: 'option',
width: '180px',
pinned: 'right',
right: '0px',
type: 'button',
buttons: [
{
icon: 'remove_red_eye',
tooltip: 'Visualizar',
type: 'icon',
click: record => this.view(record.id),
},
{
icon: 'check',
tooltip: 'Aprovar',
type: 'icon',
pop: true,
popTitle: 'Aceitar Cadastro?',
popOkText: 'Confirmar',
popCloseText: 'Cancelar',
click: record => this.edit(record, 'approved'),
},
{
icon: 'cancel',
tooltip: 'Rejeitar',
color: 'warn',
type: 'icon',
pop: true,
popTitle: 'Rejeitar Cadastro?',
popOkText: 'Confirmar',
popCloseText: 'Cancelar',
click: record => this.edit(record, 'rejected'),
},
],
},
];
isLoading = false;
multiSelectable = false;
rowSelectable = false;
hideRowSelectionCheckbox = false;
showToolbar = false;
columnHideable = true;
columnMovable = true;
rowHover = true;
rowStriped = true;
showPaginator = true;
expandable = false;
products: any = []
productsTable: any = [{
"description": "HIGIENIZAÇAO CAIXA 6424",
"id": 1,
"quantity": "5"
}]
edit(a, b) {
}
view(a) {
}
changeSelect(e: any) {
console.log(e);
}
changeSort(e: any) {
console.log(e);
}
constructor(
private fb: FormBuilder,
private cdr: ChangeDetectorRef,
@Inject(MAT_DIALOG_DATA) public data: any,
private dataService: TablesDataService,
private deschargeService: DeschargeService,
private toastr: ToastrService,
public dialog: MtxDialog
) {
this.reactiveForm = this.fb.group({
client: [null],
dt_descharge: [null],
product: [null],
quantity: [null],
status: ['Todos'],
});
}
ngOnInit() {}
addProduct() {
this.productsTable.push({
"description": "HIGIENIZAÇAO CAIXA 6424",
"id": 1,
"quantity": "5"
})
}
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent