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

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

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