Question

因此对于服务任务，我正在这样做（在线Angular课程的任务）。我的用户服务代码是

export class UserServicesService {

  constructor() {
    console.log(1);
  }

  users = [
    {
        name: 'Mohsin',
        active: true,
        id: 1
    },
    {
        name: 'Testaccount',
        active: true,
        id: 2
    },
    {
        name: 'Hidden Account',
        active: false,
        id: 3
    }
];

  updateStatus(user: any, status: boolean) {
    this.users.filter(i => i.id === user.id)[0].active = status;

    console.log(this.users);
  }
}

活跃用户

import { UserServicesService } from './../services/user-services.service';
import { Component, OnInit } from '@angular/core';

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

  users: any[] = [];
  constructor(private userService: UserServicesService) { }

  ngOnInit() {
    this.init();
  }

  setStatus(user) {
    this.userService.updateStatus(user, false);
    this.init();
  }

  init() {
    this.users = this.getActiveUsers();
  }

  getActiveUsers() {
    return this.userService.users.filter(i => i.active);
  }
}

我的非活动用户组件是

import { Component, OnInit } from '@angular/core';
import { UserServicesService } from '../services/user-services.service';

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

  users: any[];
  constructor(private userService: UserServicesService) { }

  ngOnInit() {
    this.init();
  }

  setStatus(user) {
    this.userService.updateStatus(user, true);
    this.init();
  }

  init() {
    this.users = this.getInActiveUsers();
  }

  getInActiveUsers() {
    return this.userService.users.filter(i => !i.active);
  }


}

我已将服务包含在应用程序组件中。

活跃用户的模板

    <div *ngFor="let user of users;">
        {{user.name}}
        <button (click)="setStatus(user)">Inactivate</button>
    </div>

非活动用户的模板

<div *ngFor="let user of users;">
    {{user.name}}
    <button (click)="setStatus(user)">Activate</button>
</div>

更新状态后，它不会反映在我的视野中。

Answer 1

在服务中使用BehaviourSubject而不是直接访问数组，这样您的服务看起来就像

import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs'
@Injectable({providedIn:'root'})
export class UserServicesService {

  constructor() {
    console.log(1);
  }
users=[
    {
        name: 'Mohsin',
        active: true,
        id: 1
    },
    {
        name: 'Testaccount',
        active: true,
        id: 2
    },
    {
        name: 'Hidden Account',
        active: false,
        id: 3
    }
]
  usersSubject = new BehaviorSubject<any[]>(this.users);


  getUsers(){
    return this.usersSubject.asObservable();
  }

  updateStatus(user: any, status: boolean) {
  user.active = status;
  this.usersSubject.next(this.users);
  }
}

然后订阅组件，例如非活动组件

init() {
    this.userService.getUsers().subscribe(data=>{
    this.users = this.userService.users.filter(i => !i.active);
    })
  }

仅在ngOnInit内部调用init

working demo

Answer 2

根据Array.prototype.filter()

filter（）方法创建一个新数组，该数组包含所有通过提供的功能实现的测试的元素。

在UserServicesService.updateStatus

this.users.filter(i => i.id === user.id)[0].active = status;
// all operations from here             ^
// are doing on the copy of the this.users array

根据How to change value of object which is inside an array using JavaScript or jQuery?更改

this.users.filter(i => i.id === user.id)[0].active = status;

到

for(const i in this.users) {
    if(this.users[i].id === user.id) {
        this.users[i].active = status;
        break;
    }
}

无法在活动和非活动Angular 8之间切换

2 个答案: