Блог

Главная - Вопросы по программированию - * ngIf Как установить локальную угловую переменную внутри списка и использовать ее вне конца итерации списка

* ngIf Как установить локальную угловую переменную внутри списка и использовать ее вне конца итерации списка

#angular

#angular

Вопрос:

У меня есть этот код, в котором, если запись имеет baseline=1, я хочу установить переменную, в которой присутствует baseline в списке, и использовать ее вне таблицы. Как это сделать? Мне нужна опция #noBaseline только тогда, когда нет записи с базовой линией = 1

 <tr class="mat-row" *ngFor="let markup of markups">
    <td class="mat-cell">{{markup.category}}</td>
    <td class="mat-cell">{{markup.markup_percent}}</td>
    <td class="mat-cell">{{markup.markup_flatrate}}</td>
     <td class="mat-cell"><span *ngIf="markup.baseline else noBaseline"> Default Markup </span></td>
     <td class="mat-cell"><button  mat-icon-button matSuffix>
   <mat-icon [routerLink]="[markup.id]">edit</mat-icon>
  </button> <button (click)="deleteMarkup(markup.client_name,markup.id)"  mat-icon-button matSuffix>
    <mat-icon>delete</mat-icon>
  </button></td>
  </tr>

<ng-template #noBaseline >
  <mat-card >
    
    <h2>No Default Markup is present </h2>
    <div>This is the global markup setting. Any product that does not match a specific markup rule will use these values. </div>
    <br />
     <button mat-raised-button color="accent" routerLink="add-default-markup"><mat-icon>add_circle</mat-icon> Add Default Markup</button>
   </mat-card>
  </ng-template>

Если я использую #noBaseline в ng-template, в таблице отображается, где базовая линия равна 0 для всех остальных строк.
Как использовать noBaseline вне таблицы.

Ответ №1:

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

     <table class="table">
<thead>
<tr>
  <th scope="col">category</th>
  <th scope="col">percent</th>
  <th scope="col">flatrate</th>
  <th scope="col">baseline</th>
  <th></th>
</tr>
</thead>
<tbody>
<tr class="mat-row" *ngFor="let markup of markups">
<td class="mat-cell">{{markup.category}}</td>
<td class="mat-cell">{{markup.markup_percent}}</td>
<td class="mat-cell">{{markup.markup_flatrate}}</td>
 <td class="mat-cell">
<span *ngIf="markup.baseline"> 
Default 
 Markup </span>
</td>
<td class="mat-cell">
 <span *ngIf="markup.baseline != 1"> 
 <mat-card >
<h2>No Default Markup is present </h2>
<div>This is the global markup setting. Any product that does not match a 
specific markup rule will use these values. </div>
<br/>
 <button mat-raised-button color="accent" routerLink="add-default-markup"> 
<mat-icon>add_circle</mat-icon> Add Default Markup</button>
</mat-card> </span></td>
<td class="mat-cell"><button  mat-icon-button matSuffix>
<mat-icon [routerLink]="[markup.id]">edit</mat-icon>
</button> <button (click)="deleteMarkup(markup.client_name,markup.id)"  
mat-icon-button matSuffix>
<mat-icon>delete</mat-icon>
</button></td>
</tr>
</tbody>
</table>

Комментарии:

1. Это не помогает @pallavi. Это заставляет шаблон для noBaseline появляться в каждой строке, где baseline = 0. Я хочу использовать ее вне таблицы.

2. @smiti Я обновил свой ответ, вы можете попробовать его в качестве альтернативы, если это соответствует вашим требованиям

3. Прошу прощения за то, что не объяснил вопрос должным образом. Может быть только одна строка с разметкой.baseline=1. Мое условие заключается в том, что когда есть хотя бы одна строка, где базовая линия = 1, а остальные все остальные имеют базовую линию 0, я хочу функциональность в другом div, где я хочу, чтобы пользователь добавил разметку с базовой линией = 1 (div с #noBaseline). Я не хочу предоставлять эту функциональность в других строках таблицы. Этот div noBaseline не зависит от таблицы и должен присутствовать только в том случае, если нет даже одной строки с baseline=1 . Ваш код помещает этот div в каждую строку baseline = 0 .