JS Ошибка типа метода класса при вызове в конструкторе - PullRequest
Новая
       14

JS Ошибка типа метода класса при вызове в конструкторе

0 голосов
/ 12 февраля 2020

Вот сценарий кода фрагмента.

Дается та же ошибка типа:

"Uncaught TypeError: this.createHeader не является функцией" 

class HtmlElement {
	
	constructor(container, tag, id, classes, text){
		let html = document.createElement(tag);
		classes.split(' ').forEach(cls => html.classList.add(cls));
		if(text) html.innerText = text;
		html.id = id;
		container.appendChild(html);
		return html;
	}
}

class HtmlTable extends HtmlElement {

	constructor(container, id, classes, arrayWithObjects){
		super(container, 'table', id, classes);
		
		this.arrayWithObjects = arrayWithObjects;
		this.columns = Object.keys(this.arrayWithObjects);
		
		if(this.columns.length > 0) this.createHeader(this.columns);
		if(this.arrayWithObjects && this.arrayWithObjects.length > 0 ) this.createDataRows(this.arrayWithObjects);
		
		
	}
	
	createHeader(columns){
		console.log(columns);
	}
	
	createDataRows(arrayWithObjects){
		console.log(arrayWithObjects);
	}
	
	getDataObjects(){
		let headers = table.querySelectorAll('thead th');
		let dataRows = this.table.querySelectorAll('tbody tr');
		var all = [];
		
		dataRows.forEach( row => {
			let cells = row.querySelectorAll('td');
			var obj = {};
			cells.forEach( (cell, index) => {
				let header = headers[index];
				let prop = header.innerText;
				let value = cell.innerText;
				obj[prop] = value;
			});
			all.push(obj);
		})
		return all;
	}
}

var arr = [
  { firstName: 'Mike', lastName: 'Miller' },
  { firstName: 'Joe', lastName: 'Jester' }
];

var tbl = new HtmlTable(document.querySelector('#app'), 'teamTable', 'w3-table-all w3-hoverable w3-margin-top w3-margin-bottom', arr);
<div id='app'></div>

Я получаю ошибку типа при попытке вызвать метод класса в конструкторе.

Я вызываю его с помощью this.methodName.

Но в браузере отображается Uncaught TypeError: this.createHeader не является функцией 

class HtmlTable extends HtmlElement {

    constructor(container, id, classes, arrayWithObjects){
        super(container, 'table', id, classes);

        this.arrayWithObjects = arrayWithObjects;
        this.columns = Object.keys(this.arrayWithObjects);

        if(this.columns.length > 0) this.createHeader(this.columns);   //HtmlTable.js:12 Uncaught TypeError: this.createHeader is not a function
        if(this.arrayWithObjects.length > 0 ) this.createDataRows(this.arrayWithObjects);
    }

    createHeader(columns){
        console.log(columns);
    }

    createDataRows(arrayWithObjects){
        console.log(arrayWithObjects);
    }
}

class HtmlElement {

    constructor(container, tag, id, classes, text){
        let html = document.createElement(tag);
        classes.split(' ').forEach(cls => html.classList.add(cls));
        if(text) html.innerText = text;
        html.id = id;
        container.appendChild(html);
        return html;
    }
}
...