Доступ к дочернему компоненту внутри модального с помощью ViewChild в Angular

У меня есть таблица PrimeNG в качестве дочернего компонента, и она имеет следующий код:

child-component.html

<p-table 
    [value]="data" 
    [autoLayout]="true"
    [loading]="loading"
    [(selection)]="selectedItems" #dt
>

child-component.ts

@Component({
    selector: "manager-grid",
    templateUrl: "./grid.component.html",
    styleUrls: ["./grid.component.scss"],
    encapsulation: ViewEncapsulation.None
})

export class GridComponent implements OnInit {

    public _data: Array<any>;
    public _settings: any;
    public _loading: boolean;
    public total = 100;
    public selectedItems: any[];
    public _columnFilters: any;
    @ViewChild('dt') table: Table;

Теперь я включаю этот компонент в родительские компоненты следующим образом:

<manager-grid  [data]="data" [settings]="tableSettings" [loading]="isLoading"></manager-grid>

Дочерний компонент добавляется в модальном режиме, поэтому, когда я пытаюсь получить доступ к переменной selectedItems, он возвращает undefined. Я использую для этого следующий код:

@ViewChild(GridComponent) gridComponent: GridComponent;

const items = this.gridComponent.selectedItems;

Я использую модальный NG Bootstrap и думаю, что проблема в том, что при инициализации страницы дочерний компонент не является частью DOM, как в модальном. Как я могу получить доступ к элементу внутри модального окна? Любое обходное решение?


typescript javascript angular viewchild
person Happy Coder    schedule 27.09.2020    source источник
comment
когда вы пытаетесь получить доступ к данным элементов? вы уверены, что в момент, когда вы пытаетесь его прочитать, компонент полностью смонтировался и инициализировался? Я спрашиваю об этой строке: const items = this.gridComponent.selectedItems;   -  person Anton Kononenko    schedule 27.09.2020
comment
@AntonKononenko Да. На самом деле в модальном есть кнопка, и я пытаюсь получить доступ к выбранным элементам при нажатии кнопки. viewchild-in-angular?noredirect=1#comment113325835_64086401" title="доступ к дочернему компоненту внутри модального окна с использованием viewchild в angular"> stackoverflow.com/questions/64086401/   -  person Happy Coder    schedule 27.09.2020
comment
нажимается ли эта кнопка до или после срабатывания selection из таблицы PrimeNG?   -  person Anton Kononenko    schedule 27.09.2020
comment
Да. Нажимается после того, как выбор сделан. На самом деле я включил этот дочерний компонент два раза. Один в модальном, а другой не в модальном. Для таблицы, которая не модальна, я получаю выбранные элементы. Но в модальном я не получаю, даже если использую ViewChildren   -  person Happy Coder    schedule 27.09.2020
comment
Можете ли вы сделать stackblitz на основе вашего кода, чтобы мы могли его посмотреть?   -  person Adamski    schedule 27.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас есть метод открытия модального окна, войдите в selectedItems после открытия модального окна. Вы можете попробовать следующее -

openModal() {
  // open modal code goes here
  if (this.gridComponent) {
    items = this.gridComponent.selectedItems;
  }
}

Если это не сработает, вы можете попробовать settimeout -

setTimeout(() => {
  if (this.gridComponent) {
    items = this.gridComponent.selectedItems;
  }
},0);
person Jobayer Ahmmed    schedule 27.09.2020
comment
Это тоже не работает. В функции открытия модального окна не будет никаких элементов, поскольку элементы можно выбирать только после открытия модального окна. Опция тайм-аута также показывает undefined. - person Happy Coder; 27.09.2020
comment
Как насчет того, чтобы проверить, является ли gridComponent неопределенным или нет? - person Jobayer Ahmmed; 27.09.2020
comment
Это. Вот в чем проблема. Когда я пытаюсь получить доступ к дочернему компоненту из родительского внутри модального окна с помощью ViewChild, он не получает ссылку. Если я использую его без модального окна, все работает нормально. - person Happy Coder; 28.09.2020
comment
вам нужно предоставить stackblitz, предположение здесь не работает. Нужно увидеть ваш код - person Jobayer Ahmmed; 28.09.2020