如何在Angular中返回一个具有空属性的Observable对象

huangapple go评论72阅读模式
英文:

How to return an object with empty properties in an Observable in Angular

问题

以下是您要翻译的部分:

"I have a component that creates an object getting it from this.route.snapshot.

The object arrives to the component coming from a resolver.

There's a case that the resolver will return an object with data.

And there's another case that the resolver will return an object with no data in every property.

The problem is in this second case.

I need to set every property value.

Like this:
return of({personId: '', firstName: '', lastName: ''});

Instead would like to have a simpler way to return it without needing to set each property individually.

Something like:

return new Observable<Person>;

But this doesn't work.

The reason I want to simplify this is because sometimes I need to return objects that have many properties.
Sometimes some of those properties are other application objects or an array of objects, not just a few strings that can be set to empty.
So I need to create every object, one by one, setting each property and one object referencing the other to be able to do this return.
Like in the code below.
Was wondering if there's a simpler way to return a clear object.

person.ts

export interface Person {
    personId: string;
    firstName: string;
    lastName: string;
    group: Group;
}

person.component.ts

...
ngOnInit(): void {
   const person: Person = this.route.snapshot.data['person'];
...
}

person.resolver.ts

@Injectable({
  providedIn: 'root'
})
export class PersonResolver implements Resolve<Person> {

  constructor(private service: PersonsService){ }
  
  personGroup: PersonGroup = {groupId: '', groupName: '...'}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person> {
    return of({personId: '', firstName: '', lastName: '', group: this.personGroup, ...});  
  }
}

These are some alternatives I tried:

return null;

Message: Type 'null' is not assignable to type 'Observable'.

let person = {} as Person;
return person;

Message: Type 'Person' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.

return new Observable<Person>;

No error occurs, but it doesn't get back to component.ts ngOnInit() to continue running there.

let person: Partial<Person> = {};
return person;

Message: Type 'Partial' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more

let person: Person | Record<string, never> = {};
return person;

Message: Type 'Record<string, never>' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.

英文:

I have a component that creates an object getting it from this.route.snapshot.

The object arrives to the component coming from a resolver.

There's a case that the resolver will return an object with data.

And there's another case that the resolver will return an object with no data in every property.

The problem is in this second case.

I need to set every property value.

Like this:
return of({personId: &#39;&#39;, firstName: &#39;&#39;, lastName: &#39;&#39;});

Instead would like to have a simpler way to return it without needing to set each property individually.

Something like:

return new Observable&lt;Person&gt;;

But this doesn't work.

The reason I want to simplify this is because sometimes I need to return objects that have many properties.
Sometimes some of those properties are other application objects or an array of objects, not just a few strings that can be set to empty.
So I need to create every object, one by one, setting each property and one object referencing the other to be able to do this return.
Like in the code below.
Was wondering if there's a simpler way to return a clear object.

person.ts

export interface Person {
    personId: string;
    firstName: string;
    lastName: string;
    group: Group;
}

person.component.ts

...
ngOnInit(): void {
   const person: Person = this.route.snapshot.data[&#39;person&#39;];
...
}

person.resolver.ts

@Injectable({
  providedIn: &#39;root&#39;
})
export class PersonResolver implements Resolve&lt;Person&gt; {

  constructor(private service: PersonsService){ }
  
  personGroup: PersonGroup = {groupId: &#39;&#39;, groupName: &#39;&#39;...}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;Person&gt; {
	return of({personId: &#39;&#39;, firstName: &#39;&#39;, lastName: &#39;&#39;, group: this.personGroup, ...});	
  }
}

These are some alternatives I tried:

return null;

Message: Type 'null' is not assignable to type 'Observable<Person>'

let person = {} as Person;
return person;

Message: Type 'Person' is missing the following properties from type 'Observable<Person>': _isScalar, source, operator, lift, and 6 more.

return new Observable&lt;Person&gt;;

No error occurs, but it doesn't get back to component.ts ngOnInit() to continue running there.

let person: Partial&lt;Person&gt; = {};
return person;

Message: Type 'Partial<Person>' is missing the following properties from type 'Observable<Person>': _isScalar, source, operator, lift, and 6 more

let person: Person | Record&lt;string, never&gt; = {};
return person;

Message: Type 'Record<string, never>' is missing the following properties from type 'Observable<Person>': _isScalar, source, operator, lift, and 6 more.

答案1

得分: 1

"Instead returning person, you should return of(person).

let person = {} as Person; return of(person);"

英文:

Instead returning person, you should return of(person).

let person = {} as Person; return of(person);

huangapple
  • 本文由 发表于 2023年7月4日 22:12:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76613513.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定