Скачать или смотреть How to Show Values from Multiple Variables Using ngFor in Angular

Learn how to effectively display values from different variables using `ngFor` in Angular, along with clear steps for implementing it.
---
This video is based on the question https://stackoverflow.com/q/62818076/ asked by the user 'renatosantos0611' ( https://stackoverflow.com/u/13666868/ ) and on the answer https://stackoverflow.com/a/62818414/ provided by the user 'BizzyBob' ( https://stackoverflow.com/u/1858357/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: *ngFor values from different variables

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Show Values from Multiple Variables Using ngFor in Angular

In Angular development, using *ngFor to iterate over lists is a common practice. However, you might encounter a scenario where you want to display values that are not directly part of the list being iterated over. This guide addresses this specific problem: how to show values from different variables within an ngFor loop.

The Problem

Imagine you're working on an Angular component where you need to display a list of affiliations along with their corresponding access counts. You might already have services in place to fetch affiliations and their statuses, but you’re unsure how to also show the access counts for these affiliations using the ngFor directive in your HTML template.

Example Context

In your component, you have the following:

Services: To fetch data for affiliations, pending affiliations, and denied affiliations.

Variables: That hold the affiliations and possibly other data such as access counts that you want to display.

The challenge is how to retrieve and display the total access count inside your looping structure effectively.

The Solution

To achieve this, you can leverage Angular's powerful features such as the async pipe to bind observable data directly to your template. Below are the steps to implement this solution.

Step 1: Modify the Template

You will need to change your HTML template to use an additional async pipe to retrieve the access count for each affiliation. Here’s how you can do it:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update the Component Method

You'll need to adjust the countAccess method in your component. This method should return an observable that maps to the data needed. Here’s how you can do it:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Changes

HTML Adjustments: By adding async to countAccess(afilia.ref), Angular will automatically handle the observable that is returned from this method and update the view when the data is available.

Method Refactoring: The countAccess returns an observable that emits the access count, allowing for seamless integration with the template.

Conclusion

By using the async pipe along with observable handling in your Angular component, you can successfully display values from multiple variables within a single ngFor loop. This not only enhances the functionality of your application but also keeps your code clean and efficient.

If you have any queries or need further assistance with Angular's ngFor, feel free to reach out or explore more of our resources!