Information obtained from the visible is consistently indefinable

Question

Information obtained from the visible is consistently indefinable

I provide a service that returns observables of an array of objects

allItems: Item[] = [
    {
      id: "1",
      name: "item 1"
    },
    {
      id: "2",
      name: "item 2"
    },
    {
      id: "3",
      name: "item 3"
    },
    {
      id: "4",
      name: "item 4"
    }
  ];

function getItems {
 return of(allItems);
}

Component

allItems: Observable<Item[]>;
constructor(
    private itemService: ItemService
  ) {
    this.itemService
       .getItems()
       .pipe(first())
       .subscribe(() => {
        results => this.allItems == results;
      });

this.allItems is always undefined and it does not have any values in there. If I do console.log(results) I do get the values

angular typescript rxjs observable

Answer 1

Answer №1

It seems like you are looking to convert allFruits into an array instead of an Observable. Am I understanding that correctly? I've made some adjustments to the subscribe lambda function as well.

allFruits: Fruit[];
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(results => {
        this.allFruits == results;
      });

If you plan on using this service in combination with the async pipe, you can consider the following approach:

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.allFruits = this.fruitService
       .getFruits()
       .pipe(first());

You can then utilize allFruits along with the async pipe within your template.

Answer 2

It seems like you are looking to convert allFruits into an array instead of an Observable. Am I understanding that correctly? I've made some adjustments to the subscribe lambda function as well.

allFruits: Fruit[];
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(results => {
        this.allFruits == results;
      });

If you plan on using this service in combination with the async pipe, you can consider the following approach:

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.allFruits = this.fruitService
       .getFruits()
       .pipe(first());

You can then utilize allFruits along with the async pipe within your template.

Answer 3

Answer №2

Avoid using the equality operator ==, use the assignment operator = instead.

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

Answer 4

Avoid using the equality operator ==, use the assignment operator = instead.

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

Answer 5

Answer №3

fruitList: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.fruitList = results;
      });

However, the first() operator will return the first object which may not be an array. You can either adjust the type or remove the first() pipe.

Answer 6

fruitList: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.fruitList = results;
      });

However, the first() operator will return the first object which may not be an array. You can either adjust the type or remove the first() pipe.

Information obtained from the visible is consistently indefinable

Answer №1

Answer №2

Answer №3

Similar questions

Why does `window.location.reload()` only refresh the home page and not the other pages when using Angular?

What is the best way to delete markers from a leaflet map?

Setting up a variable with a changing value

Mastering the Angular 4.3 HttpClient: Maximizing the Potential of HttpHeaders and Interceptor

Embedding an Iframe in Angular 2 directly from the database

The 'undefined' type cannot be assigned to the '(number | null)[]' type

Directly within Angular, map the JSON data to an object for easy assignment

Why is it necessary for me to manually include and configure all d3.js dependencies in the SystemJS config file?

TS - The 'new' keyword can only be used with a void function

Can a "fragile export" be generated in TypeScript?

Here's a revised version: "How to link a lambda layer with a function in a serverless.ts file using the

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

What is the reason behind the failure of a react factory method compilation when extending a typescript class, despite it working perfectly fine on the base class?

Utilizing MUI for layering components vertically: A step-by-step guide

What sets the do/tap operator apart from other observable operators?

What is the solution to fixing the Vetur/Vuelidate issue where the error message "'validate' does not exist in type 'ComponentOptions<Vue [etc.]" is displayed?

Is it possible to utilize a service that is already being used by the imported component?

Strip away the HTML tags and remove any text formatting

What steps should I follow to ensure that TypeScript is aware of the specific proptypes I am implementing?

How can we retrieve the target element for an 'onSelectionChange' DOM event in Angular 6?