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

Question

我正在尝试 delete/remove 第一个和第二个索引循环数组中的按钮，并仅在最后一个索引值或循环中显示。

下面是方法代码：

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

为了更好地理解这里是 link 代码： 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>

所以发生的事情是我将一个名为 last 的变量添加到 for 循环的最后一项。然后仅在变量为真时显示按钮，即最后一项。

编辑

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

例如：

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

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

Delete button element from array loop Angular

html

javascript

angular7