Question

我已经进行了一段时间的分配工作，但是无法更新UsersService中的数据（用户数组）。我可以列出是否在users.service.ts中手动填写User []，但如果动态添加新用户，它将返回User的对象数组。我真的很困惑。

我的代码：

users.service.ts

import { Injectable } from "@angular/core";
import { User } from "./user";

@Injectable()

export class UsersService {
users: User[] = [];

getUsers(status: string):Array<User> {
    return this.users.filter(p => p.status==status);
}

addNew(user:User) {
    this.users.push(user);
}

setUserStatus(name: string, status: string) {
    var userIndex = this.users.findIndex(p=>p.name==name);
    this.users[userIndex].status = status;
}
}

active-users.component.ts

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../shared/users.service';
import { User } from '../shared/user';

@Component({
  selector: 'app-active-users',
  templateUrl: './active-users.component.html',
  styleUrls: ['./active-users.component.css'],
  providers: [UsersService]
})
export class ActiveUsersComponent implements OnInit {

  activeUsers : User[];

  constructor(private _userService: UsersService) { }

  ngOnInit() {
    this.activeUsers = this._userService.getUsers('active');
  }

  setStatus(name: string, status: string) {
    this._userService.setUserStatus(name, status);
  }

}

inactive-users.component.ts

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../shared/users.service';
import { User } from '../shared/user';

@Component({
  selector: 'app-inactive-users',
  templateUrl: './inactive-users.component.html',
  styleUrls: ['./inactive-users.component.css'],
  providers: [UsersService]
})
export class InactiveUsersComponent implements OnInit {

  inactiveUsers: User[];

  constructor(private _userService: UsersService) { }

  ngOnInit() {
    this.inactiveUsers= this._userService.getUsers('inactive');
  }

  setStatus(name: string, status: string) {
    this._userService.setUserStatus(name, status);
  }

}

，并且有html文件列出服务数据。您也可以在github中浏览我的项目。 https://github.com/bayramorhan/angulardemo/tree/service-assignment/src/app

模板文件

inactive-users.component.html

<div class="panel panel-default">
    <div class="panel-heading">Inactive Users</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" *ngFor="let user of inactiveUsers"><i class="glyphicon glyphicon-user text-danger"></i> {{ user.name | uppercase }} <button class="btn btn-xs pull-right btn-primary" (click)="setStatus(user.name,'active')">Set to Active</button></li>
          </ul>
    </div>
  </div>

active-users.component.html

<div class="panel panel-default">
  <div class="panel-heading">Active Users</div>
  <div class="panel-body">
      <ul class="list-group">
          <li class="list-group-item" *ngFor="let user of activeUsers"><i class="glyphicon glyphicon-user text-success"></i> {{ user.name | uppercase }} <button class="btn btn-xs pull-right btn-primary" (click)="setStatus(user.name, 'active')">Set to Inactive</button></li>
        </ul>
  </div>
</div>

谢谢。

Answer 1

您没有在setUserStatus()

中正确设置状态

setUserStatus(name: string, status: string) {
    var userIndex = this.users.findIndex(p=>p.name==name);
    this.users[userIndex].status = status;  // change this line
}

编辑：

使用Subject将新添加的用户发回该组件，因为它们不会在this.activeUsers内部反映出来。

export class UsersService {
   users: User[] = [];
   subUser : Subject<User> = new Subject<User>();

   addNew(user: User):Array<User> {
       this.users.push(user);
       this.subUser.next(this.users); // emit users after adding new
   }
}

订阅组件中的subUser

ngOnInit() {
    this._userService.subUser.subscribe(
           (users) => {
              this.activeUsers = users;
        })
}

Answer 2

我的答案是在应用Amit Chigadani解决方案后解决更多问题。

getUsers 方法使用过滤器函数，该函数将创建并返回一个新数组（包含过滤后的数据）。因此，在调用该方法之后，将新用户添加到原始用户阵列不会在 getUsers 方法返回的阵列中进行任何复制。

因此，当将用户添加到原始 users 数组中时，您必须反复调用 getUsers 方法。如果不可能，则必须从 getUsers 方法返回原始的 users 数组，并在 active-users.component.ts （可能正在使用pipe）

active-user.component.ts

.... //code

users : User[];

.... //code

ngOnInit() {
  this.users = this._userService.users; // you may use a getter
}

.... //代码

active-user.component.html

<li class="list-group-item" *ngFor="let user of users | filterPipe: 'active'"><i //Implement the filter pipe

Answer 3

我查看了您的GitHub。问题很少：

您正在通过在所有组件中使用providers: [UsersService]（例如-as seen in ActiveUsersComponent）来创建服务的新实例。因此，在NewUserComponent实例中添加的用户将对其他组件不可见。您需要摆脱所有组件中的providers麻烦，并将UsersService添加到AppModule
您仅在getUsers(status)中呼叫ngOnInit。实现此方法的方式-它从服务的users数组属性返回一个新数组。每当您添加新用户时，组件将不会收到有关新值的通知，因为Angular的更改检测将不会启动存储在组件中的数组副本。您可能需要更改设计，以便从服务中返回可观测值。目前，一种肮脏的解决方法是使用getter方法-例如，您的InactiveUsersComponent可以更改为：
```
export class InactiveUsersComponent implements OnInit {
  constructor(private _userService: UsersService) {}

   ngOnInit() {}

   get inactiveUsers() {
     return this._userService.getUsers("inactive");
   }

   setStatus(name: string, status: string) {
     this._userService.setUserStatus(name, status);
   }
}
```

通过使用吸气剂，我们始终可以拨打服务电话。 ActiveUsersComponent也需要进行类似的更改

服务数据未在Angular Project中更新

3 个答案: