Question

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

现在，我想在每行中添加一个选择选项，并列出用户想要执行的操作。如何获取正确行的所选操作的值？

这是我到目前为止所拥有的。

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

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

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

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>

到目前为止，一切都很好。我拉出用户列表并正确显示它们。每行还将有一个下拉菜单，用于选择要对用户执行的操作。我也可以通过SubmitUserAction方法获得正确的用户。我唯一的问题是如何在我的submituseraction方法中为该用户选择操作？我希望可以有一个简单的方法来获得该价值而无需太多更改。

我确实尝试更新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>

我不是改变模型的忠实拥护者，但即使这样也没有用。

任何帮助/指导/指导将不胜感激。另外，我只是从Angular开始（这个问题可能很明显），但是如果您发现其他明显不正确的地方，请告诉我。

谢谢。

Answer 1

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

<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>

角度6在* ngfor表

1 个答案: