仅在Angular中打开使用ngFor循环创建的特定输入字段

Question

我有以下代码：

table.component.html：

...
<tr *ngFor="let item of items; let i = index">
        <td>{{i+1}}</td>
        <td>{{ item.name }}</td>

        <td>
          <div *ngIf='!openDateSold; else dateEdit2'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
          </div>
          <ng-template #dateEdit2>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
          </ng-template>
        </td>
</tr>
...

table.component.ts：

...
export class TableComponent implements OnInit {
  public openDateSold: boolean;
  ...
  ngOnInit() {
    this.openDateSold = false;
  }
  showDateNotified() {
    this.openDateNotified = !this.openDateNotified;
  }
  ...
}

第三个<td>创建一个看起来像这样的列：

我应该能够单击铅笔图标并编辑该特定日期。但是，当我单击它时，它将打开所有日期的输入字段。这是一张图片，您可以了解我的意思：

如何做到这一点，以便在单击图标时仅显示该特定单元格中的输入字段？

Answer 1

创建一个组件并使用其作用域：

主要组成部分

<table>
<tr *ngFor="let item of items; let i = index">
    <td>{{i+1}}</td>
    <td>{{ item.name }}</td>

  <item item="item"></item>
</tr>
</table>

ts：

@Component({
  selector: 'item',
  templateUrl: './item.component.html',
  styleUrls: [ './item.component.css' ]
})
export class ItemComponent  {
  openDateSold;
  openDateNotified:any;
  @Input() item:any
ngOnInit() {
    this.openDateSold = false;
  }
  showDateSold() {
    this.openDateSold = !this.openDateSold;
  }
}

html：

<td>
    <div *ngIf='!openDateSold; else dateEdit2'>
        {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
        <br>
        <button class="icon-button" type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
    </div>
    <ng-template #dateEdit2>
        <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
        <button type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
    </ng-template>
</td>

Here

如果您只想打开一项，则应尝试demo:stackblitz

Answer 2

在TS中定义此变量

toggle=[]

<tr *ngFor="let item of items; let i = index">
        <td>{{i+1}}</td>
        <td>{{ item.name }}</td>

        <td>
          <div *ngIf='!openDateSold; else dateEdit2'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateSold();toggle[i]=!toggle[i]'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
          </div>
          <ng-template #dateEdit2>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateSold();toggle[i]=!toggle[i]'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
          </ng-template>
        </td>
</tr>

...

Answer 3

您可以使用

我已在 Stackblitz

上创建了一个演示

  

Component.html

<tr *ngFor="let item of items; let i = index">
    <td>{{i+1}}</td>
    <td>{{ item.name }}</td>

    <td>
        <div *ngIf='!item.isEdit'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateNotified(item)'>
                <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
        </div>
        <div *ngIf='item.isEdit'>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateNotified(item)'>
                <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
        </div>
    </td>
</tr>

  

Component.ts

showDateNotified(items:any) {
    items.isEdit = !items.isEdit;
}