Question

我有sender和receiver组件通过data服务连接。在sender的模板中，有一个输入字段，我可以输入数字，点击按钮，该数字会发送到receiver并存储在变量arr中。在receiver我有许多对象数组。我需要的是根据用户输入的号码，显示相关列表中的信息（0：同事，1：客户，2：朋友等）。我不希望在模板上有几个div，每个都根据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

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

这应该做的工作：

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

Answer 2

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

这是working demo，显示了如何操作。

在模板上显示特定数组

2 个答案: