Angular 在模板上显示特定数组

我有一个

发送方

和一个

接收方

组件，它们通过

数据

服务连接。在

发送方

的模板中，有一个输入字段，我可以键入一个数字，通过单击按钮，该数字被发送到

接收方

，并存储在变量

arr

中。在

receiver

中，我有许多对象数组。我需要的是根据用户输入的号码、显示的相关列表中的信息（0:同事、1:客户、2:朋友等）。 我不想在模板上有几个

div

s，每个都根据

arr

是什么来呈现。我宁愿只有一个部门为我做这件事

服务代码：

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()
  }

}

从'@angular/core'导入{Injectable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@可注射（）
导出类数据服务{
private defaultArray=new BehaviorSubject（0）；
currentArray=this.defaultArray.asObservable（）；
更改数组（arr:number）{
this.defaultArray.next（arr）；
}
构造函数（）{}
}

发件人代码：

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()
  }

}

从'@angular/core'导入{Component，OnInit}；
从“../data.service”导入{DataService}；
@组成部分({
选择器：“应用程序发送器”，
模板：`更改数组
`,
样式URL:['./sender.component.css']
})
导出类SenderComponent实现OnInit{
arr：数字；
构造函数（私有数据：DataService）{}
更改阵列（inp）{
这个.data.changeArray（inp）；
}
恩戈尼尼特（）{
this.data.currentArray.subscribe（arr=>this.arr=arr）；
}
}

接收器代码：

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()
  }

}

从'@angular/core'导入{Component，OnInit}；
从“../data.service”导入{DataService}；
@组成部分({
选择器：“应用程序接收器”，
模板：`



`,
样式URL:['./receiver.component.css']
})
导出类ReceiverComponent实现OnInit{
arr：数字；
同事=[
{
姓名:"Jack N",，
年龄:25岁，
标题：“实习生”
},
{
姓名：'Susan A'，
年龄:22,，
标题：“开发者”
},
{
姓名：'Pete Z'，
年龄:30,，
同事：“簿记员”
}
];
客户=[
{
姓名：'Sara B'，
州：'CA'，
坏信用：错
},
{
姓名：“Donald F”，
国家：“瓦”，
坏信用：错
}
];
朋友=[
{
姓名：“卡尔·G”，
食品要求：“无麸质面包”
},
{
名称：“菲利帕O”，
食品要求：“低乳糖牛奶”
},
{
产品代码：“DER5509”，
产品名称：“黑巧克力”
}
]
listofList=[this.components，this.Customers，this.Products]；
构造函数（私有数据：DataService）{}
恩戈尼尼特（）{
this.data.currentArray.subscribe（）
}
}

---

我已经测试过，我可以看到组件之间的通信工作正常。但是，通过发送和接收新的阵列号（

arr

），仍会显示默认列表。而我希望在

arr

的值之后显示一个新列表

---

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

您的服务从未更新来自

ReceiverComponent

的变量

arr

这应该可以做到：

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

---

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

---

这是一个演示如何执行此操作的示例。

您发布的代码中到底有什么不起作用？通过发送和接收新的阵列号（arr），仍然会显示默认列表。我希望在arr值之后显示一个新列表。如果您的目标是只显示一个数组，为什么在接收器组件中使用

*ngFor

？您的意思是什么？我使用了

*ngFor

来浏览整个数组并显示数据。好的，我知道你在这里试图做什么，我发布了一个asnwerI刚刚尝试了这个，但是没有帮助：

ngOnInit（）{this.data.currentary.subscribe（arr=>this.arr=arr）}

如果你添加

console.log（arr）

在

订阅中

你看到你的号码了吗？