Отображение скрытого элемента Div по определенному индексу с использованием таблицы материалов Angular

У меня есть мат-стол, который имеет следующие функции: -

(1) Добавить/удалить строки

(2) Добавьте данные в строку, используя различные элементы управления (поле со списком, текстовое поле и т. д.).

Один из элементов управления (дополнительная информация) представляет собой текстовое поле, которое при появлении символа ? отображается скрытый элемент «div», который в конечном итоге будет использоваться для хранения списка данных.

У меня проблема в том, что если я добавлю, скажем, 3 строки и введу? в 3-ю строку скрытый «div» отображается во всех 3-х строках.

Мне нужен способ каким-то образом индексировать каждую строку, добавленную в таблицу, и отображать только элемент «div» этой строки.

К сожалению, мои знания HTML ограничены, и я также новичок в Angular.

Я создал решение StackBlitz, демонстрирующее мою проблему. демо

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
450
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

ВОТ РАБОТАЮЩИЙ STACKBLITZ
Я создал массив expandedCols : boolean[] = [];, который отслеживает состояние (расширено или нет) вашего div, когда вы добавляете строку, я также добавляю ее в этот массив со значением по умолчанию false, когда вы ставите ? Я просто меняю значение по индексу i на true.

<ng-container matColumnDef="additionalCode" class="parent" >
      <th mat-header-cell *matHeaderCellDef>Additional Code</th>
      <td mat-cell *matCellDef="let element; let i = index" class="parent" >
        <mat-form-field class="type">
          <input matInput (keyup)="toggleLookup($event, i)" autocomplete="off" (keydown.ArrowDown)="onDown()" placeholder="Enter ?">
        </mat-form-field>
        <div *ngIf="expandedCols[i] == true" class="child">Yah it expanded
          <button (click)="expanded = false">Close</button>
        </div>
      </td>
</ng-container>

ТС:

addRow() {
    this.doAddRow();
    this.expanded = false;
    this.expandedCols.push(false);
  }

toggleLookup(event: any, i): void {
    if (event.target.value !== '?') {
      return;
    }
    event.target.value = '';
    this.expanded = true;
    this.expandedCols[i] = true;
  }

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

Правильный способ решить вашу проблему - использовать локальное состояние строки, поэтому поместите свой атрибут в коллекцию столбцов (новый столбец скрыт). Таким образом, у вас будет возможность управлять expanded свойством конкретной строки. Вот ваш обновлен стекблиц.

Другие вопросы по теме