Angular（点击）方法返回未定义

Question

所以我有一个组件，它显示了一个用户列表，当我点击它时，它应该打开用户详细信息视图。但是，根据当前代码，当我查看网络选项卡时，我看到由于某种原因使用未定义或姓氏、名字发出了 XHR 请求。

我的 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);
    });
  }
}

我的用户.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

Answer 1

如果我正确理解了问题，此更改将使其按照您的要求工作。

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

演示：https://stackblitz.com/edit/angular-yjma43

Answer 2

是的，你的代码是错误的。在你的 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);
}