Расширяйте li новыми элементами, когда пользователь нажимает на него - PullRequest
Новая
       10

Расширяйте li новыми элементами, когда пользователь нажимает на него

0 голосов
/ 15 октября 2018

У меня есть список с кнопкой удаления на каждой странице.Когда пользователь нажимает кнопку «Удалить», этот ли должен развернуться и показать подтверждающее сообщение и две кнопки только для этого ли.В настоящее время, когда я нажимаю на любую кнопку удаления, отображается сообщение с подтверждением для всех ли

. Я вставил свой код в приведенный ниже стекаблитц.https://stackblitz.com/edit/angular-oxnnhv

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

См. обновленный стек .Используйте переменную show для каждого item следующим образом: 

fieldViewList = [
  {
      title: 'field1',
      show: false
  },
  {
      title: 'field2',
      show: false
  },
  {
      title: 'field3',
      show: false
  },
  {
      title: 'field4',
      show: false
  },
  {
      title: 'field5',
      show: false
  }
];

Это позволяет вам переключать каждый элемент отдельно.

Не забудьте изменить вид следующим образом: *ngIf="eachColumn.show"и {{eachColumn.title}} и получить доступ к столбцам, используя column.show = true; в компоненте.

0 голосов
/ 15 октября 2018

Измените приведенный ниже код, и он должен работать.Теперь вместо настройки шоу вы можете назначить, какой элемент отображать. 

  showDeleteConfirmation(e, eachColumn) {
    e.stopPropagation();
    console.log('showDeleteConfirmation');
    this.show = eachColumn;
  }
 <div fxLayout="column" *ngIf="show === eachColumn">
0 голосов
/ 15 октября 2018

Показать переменную является общей для всех элементов.Таким образом, весь пользовательский интерфейс включен.Используйте индекс использования для исправления, как показано ниже 

<li fxLayout="column" class="field-list-item filters" *ngFor="let eachColumn of fieldViewList;let i = index"
                    (click)="fieldSelect(eachColumn)">
                    <div fxLayout="row">
                    <div class="title-container">
                        <span class="title">{{eachColumn}}</span>
                    </div>
                    <div class="delete-field hide" (click)="showDeleteConfirmation(i)">Del</div>
                    </div>
                    <div fxLayout="column" *ngIf="show === i" id="{{i}}">
                    <span> Please confirm if you want to delete this field view. This operations can not be undone. </span>
                    <div class="confirmation-button-container">
                        <button (click)="cancelConfirmation($event)">Cancel</button>
                        <button (click)="deleteField($event,eachColumn)">Delete</button>
                    </div>
                    </div>
                </li>

Компонент должен быть изменен следующим образом 

export class AppComponent  {
  name = 'Angular';
  fieldViewList = ['field1','field2','field3','field4','field5'];
   public show: number;

   deleteField(e, column) {
    e.stopPropagation();
    console.log('deleteField() : ', e);
    console.log('column : ', column);

  }

  showDeleteConfirmation(index: number) {
    console.log('showDeleteConfirmation');
    this.show = index;
  }

  cancelConfirmation(index: number) {
    console.log('cancelConfirmation');
    this.show = index;
  }

  fieldSelect(column) {
    console.log('FieldSelect() : ', column);
  }
}
...