Как увидеть кнопку на определенной строке в таблице, используя Angular 5? - PullRequest
Новая
       10

Как увидеть кнопку на определенной строке в таблице, используя Angular 5?

0 голосов
/ 25 апреля 2018

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

<tr *ngFor="let configuration of configurationList;">
          <td>{{configuration.label}}</td>
          <td class="text-center">
            <mat-checkbox color='primary' name="{{configuration.id}}" [checked]="configuration.data" [(ngModel)]="configuration.data"
              (change)="onCheckedChange($event,configuration)"></mat-checkbox>
          </td>
          <td class="text-center">
            <div class="action-wrap" *ngIf="configuration.isEdit">
              <a  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>
            </div>                                 
          </td>
        </tr>

оба тега будут видны при изменении флажка и только для этих строк. в противном случае оба скрыты. Если я установил флажок в первой строке, а затем после флажка «выбрать вторую строку», кнопка будет видна только для второй строки.

На самом деле данные используются для отображения флажка или нет при первой загрузке. Так будет отображаться кнопка на уже установленном флажке.

Если флажок установлен, кнопка будет видна.

Мой код события: 

onCheckedChange(event,configuration) {       
  configuration.isEdit=true;    
}

cancel(configuration) {
  this.configurationList.forEach(item => {
    item.isEdit = false;
  }
);

Спасибо.

Ответы [ 4 ]

0 голосов
/ 25 апреля 2018

Повторно используйте то же условие для проверки вашего флажка. Обратите внимание, что я добавил в 

<div class="action-wrap">

Объединяйте обе свои кнопки вместе , если вам не нужна отдельная логика для каждой из них.

Вы можете добавить / удалить элемент из DOM полностью: 

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
        <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
                    (change)="onCheckedChange($event,configuration)">
        </mat-checkbox>
    </td>
    <td class="text-center">
        <div *ngIf="configuration.data" class="action-wrap">
            <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
            <i class="fa fa-check"></i>
            </a>
            <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
            <i class="fa fa-times"></i>
            </a>
        </div>                               
    </td>
</tr>

Или скрыть это с помощью класса CSS. 

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
    <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
        (change)="onCheckedChange($event,configuration)"></mat-checkbox>
    </td>
    <td class="text-center">
    <div [class.hidden]="!configuration.data" class="action-wrap">
        <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
        <i class="fa fa-check"></i>
        </a>
        <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
        <i class="fa fa-times"></i>
        </a>
    </div>                               
    </td>
</tr>

.hidden { display: hidden; }
0 голосов
/ 25 апреля 2018

Вы можете использовать ngclass, чтобы скрыть элемент с помощью css (display: none;) 

<a [ngClass]="{'hidden': configuration.data}" href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
<i class="fa fa-check"></i>

, или вы можете использовать ngif, чтобы удалить элемент 

<a *ngIf="configuration.data" href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
<i class="fa fa-times"></i>

(если config.data является логическим значением)

0 голосов
/ 25 апреля 2018

используйте [скрытый] на кнопках и установите выражение 

              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>
0 голосов
/ 25 апреля 2018

Проверьте этот пример, как использовать директиву ngClass

https://stackblitz.com/edit/angular-eh4acx?file=index.html

 <h4>NgClass</h4>
     <ul *ngFor="let person of people">
          <li [ngClass]="{
          'text-success':person.country === 'UK',
        'text-primary':person.country === 'USA',
        'text-danger':person.country === 'HK'
         }">{{ person.name }} ({{ person.country }})
     </li>

Component.ts 

  class NgClassExampleComponent {

    people: any[] = [
   {
  "name": "Douglas  Pace",
  "age": 35,
  "country": 'UK'
},
{
  "name": "Mcleod  Mueller",
  "age": 32,
  "country": 'USA'
},
{
  "name": "Day  Meyers",
  "age": 21,
  "country": 'HK'
},
{
  "name": "Aguirre  Ellis",
  "age": 34,
  "country": 'UK'
},
{
  "name": "Cook  Tyson",
  "age": 32,
  "country": 'USA'
}
];

}

...