Question

从数组循环中删除按钮元素 Angular

2020-05-22

1005

javascript html angular7

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

以下是方法的代码：

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 获取按钮的元素引用，但它不起作用。请帮我解决这个问题

为了更好地理解，这里是代码链接： 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 的变量。然后，只有当变量为真时，即最后一项，才显示按钮。

编辑

我看到 masterData 中也有一个变量。您只需使用该变量即可显示按钮。

例如：

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