Question

我试图从第一和第二索引循环的数组中删除/删除按钮，并且仅在最后一个索引值或循环中显示。

下面是方法的代码：

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormGroup,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  userForm = new FormGroup({
    name: new FormControl(),
    age: new FormControl()
  });

  masterData = [{
      name: 'alex',
      age: 20,
      button: 'no'
    },
    {
      name: 'bony',
      age: 21,
      button: 'no'
    },
    {
      name: 'acute',
      age: 23,
      button: 'yes'
    }
  ]
  ngOnInit() {

  }

html:

<div *ngFor="let data of masterData">
  <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
    Name: <input formControlName="name" placeholder="Enter Name"> Age: <input formControlName="age" placeholder="Enter Age">
    <button type="submit">Submit</button>
    <button type="button">display at last </button>

  </form>
</div>

上面是代码，其中集成了对象数组，其中“最后显示”按钮应仅针对数组的最后一个对象显示。

所遵循的方法是从dom获取按钮的element-ref，但它确实起作用。请帮助我解决这个问题

为了更好地理解，这里是代码链接： https://stackblitz.com/edit/angular-chdfdh?file=src%2Fapp%2Fapp.component.ts

Answer 1

您可以从*ngFor获取索引，如下所示：

<div *ngFor="let data of masterData; let last = last">
  <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
    Name: <input formControlName="name" placeholder="Enter Name"> Age: <input formControlName="age" placeholder="Enter Age">
    <button type="submit">Submit</button>
    <button type="button" *ngIf="last">display at last </button>
  </form>
</div>

因此，正在发生的事情是我在for循环的最后一项中添加了一个名为last的变量。然后仅在变量为true时显示按钮，即最后一项。

编辑

我看到masterData中还有一个变量。您可以只使用其中的变量来显示按钮。

例如：

<div *ngFor="let data of masterData; let last = last">
  ...
    <button type="button" *ngIf="data.button === 'yes'">display at last </button>
  </form>
</div>

从数组循环角度删除按钮元素

1 个答案: