I am getting user data from backend and i need to change exact user information and send it to the backend, i make UI part with select and etc, so the question is:
How to collect changed data for an exact item from the template without form and prepare a post request body?
sorry if I explained badly. check the code below!
export class UsersComponent implements OnInit {
public isLoading: boolean = true;
public firstLoading: boolean = true;
public langChangeObs: Observable<number | null> = this.storeService.selectedLangId;
public users: IUserManagement[] = [];
public roles: IRolesList[] = [];
// @ts-ignore
private langId: number;
private ngUnsubscribe: Subject<void> = new Subject<void>();
constructor(private storeService: StoreService,
private http: HttpClientService) { }
ngOnInit(): void {
this.subscribeToChangeLang();
this.getData();
}
private subscribeToChangeLang() {
this.langChangeObs.pipe(
takeUntil(this.ngUnsubscribe)
).subscribe(langId => {
this.langId = langId as number;
});
}
private getData() {
this.http.getUsers(this.langId).subscribe((data: any) => {
console.log(data);
this.users = data.users.data;
this.roles = data.roles.data;
});
}
public sentUserChange() {
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}<nb-card size="large">
<nb-list>
<nb-list-item class="users" *ngFor="let user of users">
<div>
<nb-user [name]="user.name">
</nb-user>
</div>
<div>
<span class="label">Email:</span>
<input nbInput type="text" [(ngModel)]="user.email">
</div>
<div>
<span class="label">Role:</span>
<nb-select class="role-select" size="small" placeholder="{{user.role.role}}" [(selected)]="user.role.role">
<nb-option *ngFor="let role of roles" [value]="role.id">{{role.human_readable}}</nb-option>
</nb-select>
</div>
<div>
<button click="sentUserChange()" nbButton>Save</button>
</div>
</nb-list-item>
</nb-list>
</nb-card>