Função dentro do InnerHTML não é reconhecida

Front-end
,
#1

Olá! Estou desenvolvendo uma tabela interativa que quando clica em adicionar (função btn_add ) ela gera uma nova linha, e no final de cada linha tem um botão “X” para apagar a linha, só que quando eu clico no botão que chama a função deleteRow a página me retorna que a função não existe:

public btn_add(){
this.geral++;

var tableRef = document.getElementById("tabela") as HTMLTableElement;
var newRoll = tableRef.insertRow(-1);
var newCell;

newCell = newRoll.insertCell(0);
newCell.innerHTML = this.controlsDomain.codDominio.value;

newCell = newRoll.insertCell(1);
newCell.innerHTML = this.controlsDomain.valorDominio.value;

newCell = newRoll.insertCell(2);
newCell.innerHTML = this.controlsDomain.descricaoDominio.value;

newCell = newRoll.insertCell(3);
newCell.innerHTML = '<input id="btnDelete" type="button" class="btn btn-danger" value="X" onclick="deleteRow()"/>';
}

public deleteRow() {
console.log("ola")
}

A página HTML me responde o seguinte erro quando eu clico no botão X:
Uncaught ReferenceError: deleteRow is not defined

Desde já, muito obrigado!!

#2

Onde termina esta função? Não deveria terminar antes da deleteRow?

#3

Eu coloquei ela ali, acho que na hora de copiar não atentei a isso, mas ele fecha ali antes da função deleteRow