Angular 2 MDL Table model addAll() throws error: Cannot read property 'columns' of undefined

Question

I've been following example straight from demo app. Nevertheless, I get an error when using addAll() method to add table data to the model:

Error in ./MdlTableComponent class MdlTableComponent - inline template:7:18 caused by: Cannot read property 'columns' of undefined

Code is below, any insights would be greatly appreciated! (I simplified code and hard-coded table data).

    import { Component, OnInit } from '@angular/core';
    import {
        MdlDialogService, MdlDefaultTableModel, IMdlTableModelItem
    } from 'angular2-mdl';

    export interface ITableItem extends IMdlTableModelItem {
        fname: string;
        fsize: number;
        ftype: string;
    }

    @Component({
    ...
    })

    export class MyComponent implements OnInit {

    public fileListModel: MdlDefaultTableModel = new MdlDefaultTableModel(
        [
            { key: 'fname', name: 'File Name' },
            { key: 'fsize', name: 'File Size', numeric: true },
            { key: 'ftype', name: 'File Type' }
        ]);

        public fileListData: [ITableItem] = [
            {
                fname: 'aaa.png',
                fsize: 500,
                ftype: 'image/png',
                selected: true
            }];

    ngOnInit(): void {

            this.fileListModel.addAll(this.fileListData); // Error is thrown here

pls chekcout this answer: http://stackoverflow.com/questions/40047166/angular2-mdl-components-applied-to-angular-2-quickstart — michael, Mar 01 '17 at 09:58

score 0 · Answer 1 · answered Jul 17 '17 at 09:13

Check your corresponding template. It should be using fileListModel

<mdl-table-selectable mdl-shadow="2"
       [table-model]="fileListModel"
       [table-model-selected]="selected"
       (table-model-selectionChanged)="selectionChange($event)">
 </mdl-table-selectable>

Angular 2 MDL Table model addAll() throws error: Cannot read property 'columns' of undefined

1 Answers1