在模板上显示特定数组

Question

我有一个sender 和一个receiver 组件，它们通过data 服务连接。在sender 的模板中，有一个输入字段，我可以输入一个数字，然后单击一个按钮，该数字将发送到receiver 并存储在变量arr 中。在receiver 我有许多对象数组。我需要的是基于用户输入的数字，显示的相关列表中的信息（0：同事，1：客户，2：朋友等）。 我不想在模板上有几个divs，每个都根据arr 的内容进行渲染。我宁愿只有一个 div 为我做这件事。

服务代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class DataService {

  private defaultArray = new BehaviorSubject<number>(0);
  currentArray = this.defaultArray.asObservable();

  changeArray (arr: number) {
    this.defaultArray.next (arr);
  }

  constructor() { }

}

发件人代码：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-sender',
  template: `<button (click)="changeArray(inp.value)">Change Array</button>
              <input type='number' #inp>
              `,
  styleUrls: ['./sender.component.css']
})
export class SenderComponent implements OnInit {
  arr: number;

  constructor(private data: DataService) { }

  changeArray (inp){
    this.data.changeArray (inp);
  }

  ngOnInit() {
    this.data.currentArray.subscribe(arr => this.arr= arr);
  }

}

接收者代码：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-receiver',
  template: `
    <div>
      <ul>
        <li *ngFor="let list of listofList[arr]">
           {{list.Name}}
        </li>
      </ul>
    </div>


  `,
  styleUrls: ['./receiver.component.css']
})
export class ReceiverComponent implements OnInit {
  arr: number;    

  Colleagues = [
    {
      Name:'Jack N',
      Age:25,
      Title: 'Intern'
    },
    {
      Name:'Susan A',
      Age:22,
      Title: 'Developer'
    },
    {
      Name: 'Pete Z',
      Age:30,
      colleagueTitle: 'Bookkeeper'
    }
  ];


Customers = [
  {
    Name:'Sara B',
    State:'CA',
    badCredit: false
  },
  {
    Name: 'Donald F',
    State: 'WA',
    badCredit: false
  }
];

Friends = [
  {
    Name: 'Carl G',
    foodRequirement: 'Gluten-free Bread'
  },
  {
    Name: 'Filipa O',
    foodRequirement: 'Low-lactose milk'
  },
  {
    productCode: 'DER5509',
    productName: 'Dark Chocolate'
  }
]


listofList =[this.Colleagues, this.Customers, this.Products];

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentArray.subscribe()
  }

}

我已经测试过，我可以看到组件之间的通信工作正常。但是，通过发送和接收新的数组编号 (arr)，仍会显示默认列表。虽然我希望在 arr 的值之后显示一个新列表。

能否请您查看我的代码并帮助我找出问题所在？

Answer 1

如果我理解您要做什么，您只需在输入后更新接收器组件中的相关变量即可。

这是一个working demo，它展示了如何做到这一点。

Answer 2

来自ReceiverComponent 的变量arr 永远不会被您的服务更新。

这应该可以完成工作：

this.data.currentArray.subscribe(arr => this.arr = arr)