Использование JQuery в Angular 6: как динамически генерировать идентификатор для элемента HTML и выбирать его?

Question

Я использую Angular 6 и работаю с плагином таблицы JQuery (DataTable).

в моем HTML я положил

<table [id]="'t1'" class="display">

и в файл машинописи я положил

 $(document).ready(function () {
        $('#t1').DataTable({
          data: data, //data
          columns: columns //column definition
        });
      });

Отлично работает. Но теперь у меня есть несколько таблиц, я хочу дать динамический идентификатор. здесь tablename является локальной переменной. Я положил:

 <table [id]="tablename" class="display">

А в машинописном файле:

    $(document).ready(function () {
                $('#'+this.tablename).DataTable({
                  data: data, //data
                  columns: columns //column definition
                });
              });

Теперь таблица не отображается вообще.

Я некоторое время работал с Angular, я считаю, что синтаксис правильный, я не видел жалоб в консоли, но не могу понять, почему он не работает.

Я действительно ценю любую помощь.

Answer 1

Я портировал таблицу данных jQuery на Angular, и у меня здесь есть блик стека.

https://stackblitz.com/edit/angular-xdn6nq

CSS не включен, но будет выглядеть нормально, если у вас есть jssery datatable css.

Answer 2

Мой собственный ответ после некоторой попытки и теста:

Ошибка : внутри этого вызова JQuery 'this' указывает на что-то другое, кроме углового компонента. Так что this.tablename - undefined . такая распространенная ошибка в JavaScript.

Решение : стандарт: вне JQuery,

let self =this

И позвоните с self.tablename.