Angular 列表未填充

Question

我有一个简单的 HTML 列表，我想使用 Angular 填充它，但由于某些原因它不起作用。 console.log("getUserCollection() Data: ", data); 打印出一个数组，没问题，但是 console.log("getUser() Data: ", data); 打印出一个空对象，这可能是因为列表未填充。我该如何解决？ P.S 我应该在代码中添加异步管道吗？

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

更新 2

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

我的用户-collection.model.ts:

import { User } from './user.model';

export interface UserCollection {

    user: User[];

}

Answer 1

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

我认为在点击时调用 clickItem 时没有定义 firstname。

尝试删除 firstname 参数并改为访问组件的 selectedItem。

clickItem() {
      this.aviorBackend.getUser(selectedItem).subscribe(data => {
      // tslint:disable-next-line: no-string-literal
      this.selectedUser = data['user'];
      console.log(this.selectedUser);
      console.log("getUser() Data: ", data);
    });

编辑：

您可以在此处查看更具反应性的示例： https://stackblitz.com/edit/angular-scdzjq 也许像这样的新方法会对您有所帮助。

Answer 2

尝试向 select 元素添加名称属性，例如 name="userSelect"

更新： 根据您对 'users' 数组的示例。您应该使用 firstname 而不是 firstName，与 lastname 相同，而不是 lastName

你还应该说 this.users = data; 其中数据是用户模型的数组

Answer 3

尝试替换这个

this.users = 数据['firstname'];

用这个

this.users = 数据；

Answer 4

更改您的 getUserColletion().subscribe() 服务电话：

this.users = data['firstname'];

到

this.users = data;

同时更新您的 User 界面：

export interface User {
    _id: string;
    loginId: string;
    lastname: string;
    firstname: string;
    password: string;
    eMail: string;
    group?: string;
    role?: Role;
    active?: boolean;
    token?: string;
}

此更改是必要的，因为它反映了您作为响应获得的后端模型。否则，您可以添加一个额外的 map() 将其映射到您的前端界面模型

然后根据名称更新 .html 中的模型，例如：

{{user.lastname}}, {{user.firstname}}

并将您的点击处理程序更新为 (click)="clickItem(user.firstname)":

<select size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem">
      <!-- maybe add | async pipe -->
    <option *ngFor="let user of users" (click)="clickItem(user.firstname)">
        {{user?.lastName}}, {{user?.firstName}}
      </option>
</select>

Angular 列表未填充

Angular list does not populate

angular

typescript

ngfor