Получить значение столбца onClick во вложенной таблице HTML [Javascript]

Вам не нужны какие-либо манипуляции с DOM, вы можете упростить свое решение, как показано ниже:

app.component.ts

// .......
export class AppComponent {
  trigger(columnName: string) {
    alert(columnName);
  }
// .......
}

app.component.html

<table class = "table table-hover table-bordered table-responsive-xl" id = "table">
    <tr>
        <td> Name </td>
        <td> Place </td>
        <td> Phone </td>
    </tr>

    <tbody>

        <ng-container *ngFor = "let data of data1">
            <tr (click) = "data.expanded = !data.expanded">
                <td (click) = "trigger('Name outer')"> {{ data.expanded ? '&ndash;' : '+'}} {{data.name}} </td>
                <td (click) = "trigger('Place outer')"> {{data.place}} </td>
                <td (click) = "trigger('Phone outer')"> {{data.phone}} </td>
                <td (click) = "trigger('Hobbies Outer')"> {{data.hobbies}} </td>
                <td (click) = "trigger('Profession outer')"> {{data.profession}} </td>
            </tr>

            <ng-container *ngIf = "data.expanded">
                <tr *ngFor = "let data of findDetails(data)">
                    <td style = "padding-left: 12px" (click) = "trigger('Name inner')"> {{data.datades.name}} </td>
                    <td (click) = "trigger('Hobbies inner')"> {{data.datades.hobbies}} </td>
                    <td (click) = "trigger('Profession inner')"> {{data.datades.profession}} </td>
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>

Я не уверен, почему у вас есть этот код в вашей функции trigger. Но если вам нужно получить имя столбца при нажатии на ячейку данных, вы можете использовать следующий подход.

1. Вставьте в вызов функции trigger текущий объект мероприятие и элемент строки заголовка переменная шаблона:

<table class = "table table-hover table-bordered table-responsive-xl" id = "table">
    <tr #header>
    </tr>
    <tbody>
        <ng-container *ngFor = "let data of data1">
            <ng-container *ngIf = "data.expanded">
                <tr *ngFor = "let data of findDetails(data)" (click) = "trigger($event, header)">
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>

Итак, #header name присваивается первому tr элементу, а затем передается вместе с $event в функцию trigger.

2. В вашей функции trigger используйте эти два параметра. $event будет обычным объектом Событие мыши, а header будет обычным элементом тр. После этого вы можете найти щелкнутый заголовок столбца по индексу щелкнутой ячейки в вашей строке. gsnedders в Поток StackOverflow предоставил решение, как найти индекс элемента внутри его родителя. Ваша функция trigger может выглядеть так:

trigger($event, header) {
  const index = this.getChildNumber($event.target);
  alert(header.childNodes[index].textContent.trim());
}

Этот Проект StackBlitz иллюстрирует этот подход.