Angular 6 Select 在 *ngfor table

Question

我有一个 Angular 6 组件，它获取一个可观察的用户列表，然后使用 *ngFor 语句显示 table 个用户。每行我都包含一个提交按钮，该按钮调用组件 ts 文件中的一个函数，为该行传入用户。到目前为止，这是按预期工作的。

现在我想向每一行添加一个 select 选项，其中包含用户要执行的操作列表。如何获取正确行的 selected 操作的值？

这是我目前的情况。

-从 http 调用返回的示例 JSON 对象。

[
  {
    "userId": 1,
    "username": "user1",
    "firstName": "f1",
    "lastName": "l1",
    "active": true
  },
  {
    "userId": 2,
    "username": "user2",
    "firstName": "f2",
    "lastName": "l2",
    "active": true
  }
]

在 component.ts 中，我将 UserSearchModel[] 类型的属性订阅到 json 响应，并且还创建了一个供 table 调用的函数。

users$: UserSearchModel[];

submituseraction(user: UserSearchModel) {
    console.log(user.userId);
  }

这是模型。

export class UserSearchModel {
    userId: number;
    username: string;
    firstName: string;
    lastName: string;
    active: boolean;   
}

在 html 我有以下 tr 用于显示和提交数据。

  <tr *ngFor="let user of users$">
    <td>{{ user.username}}</td>
    <td style="word-break: break-all">{{ user.firstName }}</td>
    <td style="word-break: break-all">{{ user.lastName }}</td>
    <td>{{ user.active }}</td>
    <td class="text-nowrap">
      <select name="usersearchactions" id="usersearchactions" title="Actions">
        <option value="0">Update User Info</option>
        <option value="1">Update Email</option>
        <option value="2">Reset Password</option>
        <option value="3">Notification Settings</option>
        <option value="11">Research</option>
      </select>
      <button (click)="submituseraction(user)" class="btn btn-primary btn-xs" type="submit">GO!</button>
    </td>
  </tr>

到目前为止一切都很好。我拉出用户列表并正确显示它们。每行还会有一个下拉列表 select 要对用户执行的操作。我还在我的 submituseraction 方法中获得了正确的用户。我遇到的唯一问题是如何在我的 submituseraction 方法中为该用户获取 selected 操作？我希望有一种简单的方法可以在不做太多更改的情况下获得该值。

我确实尝试更新 UserSearchModel 以包含一个用我的列表填充的新 UserAction[] 并使用 *ngfor 命令显示它，这样我就可以从传递给函数的用户对象中获取它。这不起作用，因为在订阅事件中填充数据后 UserAction[] 未定义。我什至试图将其设置为只读并填充到构造函数中，但没有成功。这两种方式我都以未定义的 UserAction[] 结束，所以现在 select.

中没有填充任何操作

    export class UserSearchModel {
        userId: number;
        username: string;
        firstName: string;
        lastName: string;
        active: boolean;
        userActions: UserAction[] = [
                { id: 0, name: "Update User Info" },
                { id: 1, name: "Update Email" },
                { id: 2, name: "Reset Password" },
                { id: 3, name: "Notification Settings" },
                { id: 4, name: "Patient Access Requests" },
                { id: 11, name: "Research" }
            ]
    }


    export class UserAction {
        id: number;
        name: string;
    }

<select name="userActions" id="userActions" title="Actions">
    <option *ngFor="let action of user.userActions" [value]="action"> 
        {{action.name}}</option>
      </select>

我不太喜欢更改模型，但即使这样也行不通。

任何 help/direction/guidance 将不胜感激。另外，我只是从 Angular 开始（问题可能很明显），但是如果您发现其他任何明显错误的地方，请告诉我。

谢谢。

Answer 1

将angular变量声明（#foo）添加到select标签，并将其值与user一起传递给submituseraction。

<select #actions name="usersearchactions" id="usersearchactions" title="Actions">
  <option value="0">Update User Info</option>
  <option value="1">Update Email</option>
  <option value="2">Reset Password</option>
  <option value="3">Notification Settings</option>
  <option value="11">Research</option>
</select>
<button (click)="submituseraction(user, actions.value)" class="btn btn-primary btn-xs" type="submit">GO!</button>

Angular 6 Select 在 *ngfor table

Angular 6 Select in *ngfor table

typescript

ngfor

angular