所以我有一个组件,其中显示了一个用户列表,当我单击它时,它应该打开用户详细信息视图。但是,根据当前代码,当我查看“网络”选项卡时,由于某种原因,我看到XHR请求是使用undefined或Lastname,Firstname进行的。
我的Users.component.ts:
import { Component, OnInit } from '@angular/core';
import { AviorBackendService } from '../services/avior-backend.service';
import { UserCollection } from '../models/user-collection.model';
import { User } from '../models/user.model';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
selectedItem: string;
users: UserCollection;
user: User;
firstname: string;
selectedUser: User;
constructor(private aviorBackend: AviorBackendService) { }
ngOnInit() {
this.aviorBackend.getUserCollection().subscribe(data => {
// tslint:disable-next-line: no-string-literal
this.users = data['firstname'];
console.log(this.users);
console.log("getUserCollection() Data: ", data);
});
}
clickItem(firstname) {
this.aviorBackend.getUser(firstname).subscribe(data => {
// tslint:disable-next-line: no-string-literal
this.selectedUser = data['user'];
console.log(this.selectedUser);
console.log("getUser() Data: ", data);
});
}
}
我的Users.component.html:
<div class="list-area">
<div class="col-lg-12">
<p class="list-header">Element overview</p>
<div class="form-group">
<label for="filter" class="lb-sm">Filter</label>
<input type="text" class="form-control input-sm" name="filter" id="filter">
</div>
<select size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem" (click)="clickItem(firstname)">
<!-- maybe add | async pipe -->
<option *ngFor="let user of users">
{{user?.lastName}}, {{user?.firstName}}
</option>
</select>
</div>
</div>
<div class="content-area">
<div class="col-lg-12" *ngIf="selectedUser?.id">
<p>Element contents {{selectedUser?.id}}</p>
<div class="col-lg-12">
<div class="form-group">
<label for="firstName" class="lb-sm">First Name</label>
<input type="text" class="form-control input-sm" name="firstName" id="firstName" [(ngModel)]="selectedUser.firstName">
</div>
</div>
</div>
</div>
我的getUser()方法:
// Get user
getUser(firstname: string): Observable<any> {
const API_URL = `${SERVICE_URL}user/firstname/${firstname}`;
return this.client.get(API_URL, this.httpOptions).pipe(
map((res: Response) => {
return res || {};
}),
catchError(this.handleError())
);
}
我的user.model.ts:
import { Role } from './role';
// was class and not interface!
export interface User {
_id: number;
mandator?: number;
loginId: string;
lastname: string;
firstname: string;
password: string;
eMail: string;
group?: string;
role?: Role;
active?: boolean;
token?: string;
}
我的user-collection.model.ts:
import { User } from './user.model';
export interface UserCollection {
user: User[];
}
我的API响应: https://imgur.com/a/f3owVEe
答案 0 :(得分:2)
如果我对问题的理解正确,那么此更改将使其按您的要求工作。
<select size="20" class="form-control" id="elementlist" [(ngModel)]="selectedItem" (change)="clickItem($event.target.value)">
<option *ngFor="let user of users" value="{{user.firstname}}">
{{user?.lastname}}, {{user?.firstname}}
</option>
</select>
答案 1 :(得分:1)
是的,您的代码是错误的。在您的html中尝试一下:
<option *ngFor="let user of users" (click)="clickItem($event, user.firstName)" >
{{user?.lastName}}, {{user?.firstName}}
</option>
,然后在您的.ts中执行
clickItem(event, firstname)
{
console.log("Print first name: ",firstname);
}