Javascript 无法在angular2中显示从一个组件发送到另一个组件的数组
服务--Javascript 无法在angular2中显示从一个组件发送到另一个组件的数组,javascript,angular,typescript,Javascript,Angular,Typescript,服务-- import {Injectable} from '@angular/core'; import {UserData} from '../user-data/user-data.component'; @Injectable() export class UserDataService { constructor(){} userdata:UserData[]; getData(){ console.log('service',this.
import {Injectable} from '@angular/core';
import {UserData} from '../user-data/user-data.component';
@Injectable()
export class UserDataService {
constructor(){}
userdata:UserData[];
getData(){
console.log('service',this.userdata);
return this.userdata;
}
setData(user:any){
this.userdata=user;
console.log(this.userdata);
}
}
export class UserData {
firstname: string;
middlename: string;
lastname: string;
email: string;
contact: number;
}
import { Component,OnInit,OnDestroy } from '@angular/core';
import { UserData } from '../../user-data/user-data.component';
import { ViewEditUser } from '../../view-edit-user/view-edit-user.component';
import {UserDataService} from '../../user-data-service/user-data-service.service';
@Component({
selector: 'form-page',
templateUrl: `app/add-user-sidebar/user-form/form.component.html`,
providers:[UserDataService]
})
export class Form implements OnInit,OnDestroy {
userdetail:UserData;
constructor(private service:UserDataService){
}
addUser(first:string,middle:string,last:string,emailid:string,contactno:number){
this.userdetail=({firstname:first,middlename:middle,lastname:last,email:emailid,contact:contactno})
console.log(this.userdetail);
this.service.setData(this.userdetail);
}
ngOnInit(){
}
ngOnDestroy(){
}
}
import { Component,Input, OnInit } from '@angular/core';
import { Form } from '../add-user-sidebar/user-form/form.component';
import {UserData} from '../user-data/user-data.component';
import { WelcomePage } from '../welcome-page/welcome-page.component';
import {UserDataService} from '../user-data-service/user-data-service.service';
@Component({
selector:'view-edit',
templateUrl: 'app/view-edit-user/view-edit-user.component.html',
providers: [UserDataService]
})
export class ViewEditUser implements OnInit {
arraydata:any;
constructor(private service:UserDataService){}
// arraydata:any;
printarray(){
console.log(this.arraydata);
}
ngOnInit()
{
this.arraydata=this.service.getData();
console.log("hhghdfghdf",this.arraydata);
}
}
用户数据类--
import {Injectable} from '@angular/core';
import {UserData} from '../user-data/user-data.component';
@Injectable()
export class UserDataService {
constructor(){}
userdata:UserData[];
getData(){
console.log('service',this.userdata);
return this.userdata;
}
setData(user:any){
this.userdata=user;
console.log(this.userdata);
}
}
export class UserData {
firstname: string;
middlename: string;
lastname: string;
email: string;
contact: number;
}
import { Component,OnInit,OnDestroy } from '@angular/core';
import { UserData } from '../../user-data/user-data.component';
import { ViewEditUser } from '../../view-edit-user/view-edit-user.component';
import {UserDataService} from '../../user-data-service/user-data-service.service';
@Component({
selector: 'form-page',
templateUrl: `app/add-user-sidebar/user-form/form.component.html`,
providers:[UserDataService]
})
export class Form implements OnInit,OnDestroy {
userdetail:UserData;
constructor(private service:UserDataService){
}
addUser(first:string,middle:string,last:string,emailid:string,contactno:number){
this.userdetail=({firstname:first,middlename:middle,lastname:last,email:emailid,contact:contactno})
console.log(this.userdetail);
this.service.setData(this.userdetail);
}
ngOnInit(){
}
ngOnDestroy(){
}
}
import { Component,Input, OnInit } from '@angular/core';
import { Form } from '../add-user-sidebar/user-form/form.component';
import {UserData} from '../user-data/user-data.component';
import { WelcomePage } from '../welcome-page/welcome-page.component';
import {UserDataService} from '../user-data-service/user-data-service.service';
@Component({
selector:'view-edit',
templateUrl: 'app/view-edit-user/view-edit-user.component.html',
providers: [UserDataService]
})
export class ViewEditUser implements OnInit {
arraydata:any;
constructor(private service:UserDataService){}
// arraydata:any;
printarray(){
console.log(this.arraydata);
}
ngOnInit()
{
this.arraydata=this.service.getData();
console.log("hhghdfghdf",this.arraydata);
}
}
组件1--
import {Injectable} from '@angular/core';
import {UserData} from '../user-data/user-data.component';
@Injectable()
export class UserDataService {
constructor(){}
userdata:UserData[];
getData(){
console.log('service',this.userdata);
return this.userdata;
}
setData(user:any){
this.userdata=user;
console.log(this.userdata);
}
}
export class UserData {
firstname: string;
middlename: string;
lastname: string;
email: string;
contact: number;
}
import { Component,OnInit,OnDestroy } from '@angular/core';
import { UserData } from '../../user-data/user-data.component';
import { ViewEditUser } from '../../view-edit-user/view-edit-user.component';
import {UserDataService} from '../../user-data-service/user-data-service.service';
@Component({
selector: 'form-page',
templateUrl: `app/add-user-sidebar/user-form/form.component.html`,
providers:[UserDataService]
})
export class Form implements OnInit,OnDestroy {
userdetail:UserData;
constructor(private service:UserDataService){
}
addUser(first:string,middle:string,last:string,emailid:string,contactno:number){
this.userdetail=({firstname:first,middlename:middle,lastname:last,email:emailid,contact:contactno})
console.log(this.userdetail);
this.service.setData(this.userdetail);
}
ngOnInit(){
}
ngOnDestroy(){
}
}
import { Component,Input, OnInit } from '@angular/core';
import { Form } from '../add-user-sidebar/user-form/form.component';
import {UserData} from '../user-data/user-data.component';
import { WelcomePage } from '../welcome-page/welcome-page.component';
import {UserDataService} from '../user-data-service/user-data-service.service';
@Component({
selector:'view-edit',
templateUrl: 'app/view-edit-user/view-edit-user.component.html',
providers: [UserDataService]
})
export class ViewEditUser implements OnInit {
arraydata:any;
constructor(private service:UserDataService){}
// arraydata:any;
printarray(){
console.log(this.arraydata);
}
ngOnInit()
{
this.arraydata=this.service.getData();
console.log("hhghdfghdf",this.arraydata);
}
}
组件2--
import {Injectable} from '@angular/core';
import {UserData} from '../user-data/user-data.component';
@Injectable()
export class UserDataService {
constructor(){}
userdata:UserData[];
getData(){
console.log('service',this.userdata);
return this.userdata;
}
setData(user:any){
this.userdata=user;
console.log(this.userdata);
}
}
export class UserData {
firstname: string;
middlename: string;
lastname: string;
email: string;
contact: number;
}
import { Component,OnInit,OnDestroy } from '@angular/core';
import { UserData } from '../../user-data/user-data.component';
import { ViewEditUser } from '../../view-edit-user/view-edit-user.component';
import {UserDataService} from '../../user-data-service/user-data-service.service';
@Component({
selector: 'form-page',
templateUrl: `app/add-user-sidebar/user-form/form.component.html`,
providers:[UserDataService]
})
export class Form implements OnInit,OnDestroy {
userdetail:UserData;
constructor(private service:UserDataService){
}
addUser(first:string,middle:string,last:string,emailid:string,contactno:number){
this.userdetail=({firstname:first,middlename:middle,lastname:last,email:emailid,contact:contactno})
console.log(this.userdetail);
this.service.setData(this.userdetail);
}
ngOnInit(){
}
ngOnDestroy(){
}
}
import { Component,Input, OnInit } from '@angular/core';
import { Form } from '../add-user-sidebar/user-form/form.component';
import {UserData} from '../user-data/user-data.component';
import { WelcomePage } from '../welcome-page/welcome-page.component';
import {UserDataService} from '../user-data-service/user-data-service.service';
@Component({
selector:'view-edit',
templateUrl: 'app/view-edit-user/view-edit-user.component.html',
providers: [UserDataService]
})
export class ViewEditUser implements OnInit {
arraydata:any;
constructor(private service:UserDataService){}
// arraydata:any;
printarray(){
console.log(this.arraydata);
}
ngOnInit()
{
this.arraydata=this.service.getData();
console.log("hhghdfghdf",this.arraydata);
}
}
我是angular2的新手,我的模块中有两个组件,一个组件是用户输入数据的表单,然后将数据发送到服务,当我控制台记录时,我可以看到服务中的数据。但当我试图从第二个组件访问该阵列时,我无法访问数据,该怎么办?
您需要使用可观测数据在组件之间传递数据 在你的服务中创建一个主题类型变量,在你的第一个组件中做一个。接下来将数据传递给服务,在你的第二个组件中,订阅服务veriable,它将为你获取数据
您无法获取数据,因为JavaScript的异步行为将由可观察对象处理如果您在每个组件上提供服务,则无法将其用于通信,因为每个组件将获得不同的服务实例 如果一个组件是另一个组件的父组件(祖先),则仅在父组件上提供它。 否则,请在两者的父组件(anjestor)上提供,或仅在
@NgModule()
中提供,以使服务成为全局服务
您还需要注意,可能一个组件在另一个组件设置值之前读取,这取决于您设置值的位置以及组件的创建顺序。
使用BehaviorSubject
通常可以避免这个陷阱,因为这样一来,不管是先创建哪个组件,还是一个组件试图读取,而另一个组件尚未设置值
要在多个实例之间共享,请参见选中此项->您可以在服务中保留值,并尝试从服务中访问值您可以在下面的回答中看到一个实现:在特定情况下,问题是关于数字类型,但对象也是如此。这个答案详细描述了在模块中使用服务的组件之间共享数据。更多细节可以在这里找到,答案是关于同一页面上两个不同角度应用程序之间的通信。谢谢你找到了它,我最近只是在找,没找到。