Performing Iterations in Angular 2 with Immutable.js (utilizing the *ngFor directive)

Struggling with Angular 2 and Immutable JS - having issues with a simple for-loop in my template. Tried both old and new syntax without success.

<div *ngFor='#filter of filterArray' class='filter-row'>
  <div class='row-title'>{{filter.get(title)}}</div>
</div>

and the new syntax

<div *ngFor=' let filter of filterArray' class='filter-row'>
  <div class='row-title'>{{filter.get(title)}}</div>
</div>

Struggled using .get syntax for immutable maps in curly braces, unable to make it work.

Structure of filterArray:

this.filterArray = fromJS([{
  title: 'Brand',
},
{
  title: 'Category'
},
{
  title: 'Each UPC'
}]);

Any special syntax needed for this to work? Not displaying anything on browser, no errors with let syntax.

Versions:

"@angular/common": "^2.1.0",
"@angular/compiler": "^2.1.0",
"@angular/core": "^2.1.0",
"@angular/forms": "^2.1.0",
"@angular/http": "^2.1.0",
"@angular/platform-browser": "^2.1.0",
"@angular/platform-browser-dynamic": "^2.1.0",
"@angular/router": "^3.0.1",
"immutable": "^3.8.1",
"typescript": "2.0.2"

Tried this workaround but not satisfied with how it looks:

  <div *ngFor='let filter of filterArray let i=index' class='filter-row'>
    <div class='row-title'>{{filterArray.get(i).get('title')}}</div>
  </div>

Answer №1

Check out this code snippet:

<div *ngFor='let filter of filterArray' class='filter-row'>
    <div class='row-title'>{{filter.get('title')}}</div>  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React.PureComponent, the list component efficiently renders each item with optimized performance

We've developed a reusable list component in ReactJS. To address performance concerns, we decided to incorporate the shouldComponentUpdate method to dictate when our list component should re-render. public shouldComponentUpdate(nextProps: TreeItemInt ...

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API. Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue). var startDate = "2020-09-20"; var ...

Angular outputting a basic static value

After searching extensively for a solution to my issue with Angular output, I have only come across ways to emit events. In my specific scenario, I have a parent component containing a router, and I need to dynamically change the title based on a value f ...

Perpetually launching "npm start" on the server

I have been attempting to deploy an angular2 test application on a server. It is functioning well on my local machine using the command NPM start as indicated in my package.json file: "start": "concurrent \"npm run tsc:w\" \"npm run lite&bs ...

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

Is there a way to access the original target node when using MutationObserver with options set to childList: true and subtree: true? According to the documentation on MDN, the target node changes to the mutated node during callbacks, but I want to always ...

How to Use Hyperledger Composer's Rest-Server-Api Local-Passport Strategy in an Angular Application without Node.js

Is it possible for me to implement the passport-local strategy in my project, considering that I am using an angular front-end generated by the composer-rest-server tool? I noticed in the documentation for passportjs regarding passport-local, it mentions ...

Dispersed data points within ng2-charts

After reviewing the ng2-charts documentation at , unfortunately, I did not come across any information regarding a Scattered Plot. Are there alternative methods to create a Scattered plot chart in ng2-charts? Any helpful tricks or customization options a ...

How can I set an array as a property of an object using the Angular Subscribe method?

I'm attempting to retrieve array values from the en.json translation file in Angular and then bind them to an object property using the code snippet below. Here is the TypeScript code: ngOnInit() { this.en = { dayNamesMin: this.translateS ...

In the case of an Angular application, what is the reason behind hotkeys not functioning in Chrome until the user actively engages with the webpage

When using Angular, I have set up various HostListeners to listen for keydown events: @HostListener('window:keydown', ['$event']) keyEvent(evt: KeyboardEvent) { console.log(evt) } I observed in the console logs that these listeners a ...

How to fix an unresolved TypeScript import?

Within my node_modules directory, there is a package that contains the following import statement: import { x } from 'node_modules/@types/openfin/_v2/main'; Unfortunately, I am receiving an error message stating "cannot find module 'node_mo ...

Glitch causing incorrect images to appear while scrolling through FlashList

Currently, I am using the FlashList to showcase a list of items (avatars and titles). However, as I scroll through the list, incorrect images for the items are being displayed in a mixed-up manner. Based on the explanation provided in the documentation, t ...

Caution: The Vue Class Based Component is signalling that a property is not defined on the instance, yet it is being

I've been experimenting with creating a Vue component using vue-class-component and TypeScript. I referenced the official documentation here: https://github.com/vuejs/vue-class-component. Despite defining the data within the class as shown below, I en ...

When updating a user profile on Angular, the application automatically redirects to the main page

I am faced with a puzzling issue regarding two components: home and admin. In the home component, I have the capability to create, delete, and edit posts. Similarly, in the admin component, I perform similar tasks but with a different database collection ( ...

Sending a JSON payload from Angular to C# can result in a value of 0 or null being received

As a beginner working on my Angular&C# project, I encountered an issue. Despite sending a JSON from Angular to C# (POST) with values, the C# side is not receiving anything (value 0 for int and null for string). I can't figure out what I'm doi ...

Issue with dynamic form input value not being filled in upon initial submission

I currently have a form with n inputs : <form class="new-user" [formGroup]="customFields"> <div *ngFor="let customField of customer['customFields']; let i = index"> <div *ngIf="isEditing(i)" [@phaseAndSlideLeft ...

Leverage images within the Angular library

I am currently working on creating an Angular library that includes a component with an image. I have successfully added the image as an asset in the library, but when trying to display it, the image doesn't show up. Here is the current folder structu ...

Retrieve information from the API following a change in language with Ngx-Translate

I am working on a web app using Angular 12 that supports 3 languages. To manage the languages, I have utilized Ngx-Translate. Overall, everything is functioning correctly, but I have encountered a small issue. I am using the onLangChange event emitter to ...

Encountering an error with the iconv-lite package in TypeScript code

I recently added the "iconv-lite" package to my project, imported the module, and attempted to use the decode method. However, I encountered the following error: TypeError: Cannot read properties of undefined (reading 'decode') Interestingly, ...

Utilizing Angular http.post to retrieve data from Cloud Function via POST request

Trying to send a POST request to a Google Cloud Function from Angular using @angular/common/http. The documentation for Angular http v7 lacks comprehensive examples, with no information on how to include data or objects in the request. Angular code snippe ...

Sending JSON data from Angular to WCF

Attempting to utilize the post method in Angular to send JSON data to a WCF service. The data is being sent in JSON format from Angular, however, the WCF service is receiving it as a null object. Is it possible to use the get method to send JSON data? Th ...