My Angular 6 component fetches an observable list of users and displays a table using the *ngFor statement. Each row has a submit button that calls a function passing in the user for that row. This functionality works correctly.
Now, I want to add a select option to each row with a list of actions the user wants to perform. How can I retrieve the value of the selected action for the specific row?
Here is an example of the JSON object returned from an HTTP call:
[
{
"userId": 1,
"username": "user1",
"firstName": "f1",
"lastName": "l1",
"active": true
},
{
"userId": 2,
"username": "user2",
"firstName": "f2",
"lastName": "l2",
"active": true
}
]
In the component.ts file, I subscribe a property of type UserSearchModel[] to the JSON response and create a function for the table to call:
users$: UserSearchModel[];
submituseraction(user: UserSearchModel) {
console.log(user.userId);
}
Here is the model:
export class UserSearchModel {
userId: number;
username: string;
firstName: string;
lastName: string;
active: boolean;
}
In the HTML, I have the following code for displaying and submitting the data:
<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>
While everything is functioning correctly so far, I am struggling to retrieve the selected action for each user in my submituseraction method. I tried updating the UserSearchModel to include a new UserAction[] array that is populated with my list, but it did not work as expected. Any guidance on solving this issue would be greatly appreciated.
If there are any other significant errors in my code or approach, please advise as I am a beginner in Angular. Thank you.