如何解决Ng-for循环中提取DOM元素数据仅返回第一个的问题？

问题根源 #

HTML 中 id 是全局唯一标识，你用 *ngFor 循环生成多个带 id="login" 的元素不符合规范，document.getElementById() 只会返回第一个匹配的元素，这就是你只能拿到第一个数据的原因。

正确做法（推荐 Angular 风格，避免原生 DOM 操作） #

方法1：点击时直接传递当前用户对象

修改模板，把循环中的 user 对象作为参数传入点击事件：

<form class="form">
    <!-- 补充 *ngFor 循环逻辑，假设你的用户数组是 users -->
    <div class="formdiv" *ngFor="let user of users">
        <input class="name" [value]="user.login">
        <select class="authority" [value]="user.authority">
            <option>ADMIN</option>
            <option>USER</option>
        </select>
        <!-- 把 type 改为 button，避免触发表单提交；同时传入当前 user -->
        <button mat-raised-button class="deleteBtn" type="button" (click)="deleteUser(user)">X</button>
    </div>
</form>

在 TypeScript 中直接使用传入的用户对象：

deleteUser(user: any) {
    // 直接获取当前用户的 login 和 authority
    console.log(user.login, user.authority);
    // 这里执行你的删除逻辑
}

方法2：使用模板引用变量传递输入值

如果不需要整个用户对象，也可以给输入框加模板引用变量，点击时传递对应值：

<form class="form">
    <div class="formdiv" *ngFor="let user of users">
        <input #loginInput class="name" [value]="user.login">
        <select #authSelect class="authority" [value]="user.authority">
            <option>ADMIN</option>
            <option>USER</option>
        </select>
        <button mat-raised-button class="deleteBtn" type="button" (click)="deleteUser(loginInput.value, authSelect.value)">X</button>
    </div>
</form>

TypeScript 接收参数：

deleteUser(login: string, authority: string) {
    console.log(login, authority);
    // 删除逻辑
}

方法3：批量获取所有输入值（如果需要）

如果要一次性获取所有循环生成的输入框值，可以用 @ViewChildren：

1. 模板中给输入框加引用变量：

<input #loginInput class="name" [value]="user.login">

2. TypeScript 中引入并获取：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
    @ViewChildren('loginInput') loginInputs: QueryList<ElementRef>;

    getAllLoginValues() {
        // 遍历所有输入框，提取值
        const allLoginValues = this.loginInputs.map(input => (input.nativeElement as HTMLInputElement).value);
        console.log(allLoginValues);
    }
}

内容的提问来源于stack exchange，提问作者Regnad09