Utilizing the split function within an ngIf statement in Angular

Question

Utilizing the split function within an ngIf statement in Angular

<div *ngIf="store[obj?.FundCode + obj?.PayWith].status == 'fail'">test</div>

The method above is being utilized to combine two strings in order to map an array. It functions correctly, however, when attempting to incorporate the split function as shown below, template parse errors are encountered.

<div *ngIf="store[obj?.FundCode + obj?.PayWith.split(/[ ,]+/).join('-')].status == 'fail'">test</div>

Using the split function within ngIf like in the example above results in a template parse error within the application. Difficulty arises in properly executing and escaping the split function.

javascript angular typescript

Answer 1

Answer №1

I prefer avoiding complex syntax within HTML, even if it is valid; it can lead to confusion.

Instead of using complicated syntax, you can utilize the getter function as a variable, like this:

get isFailed() : boolean {
    // To prevent errors, check if obj is defined.
    if(! this.obj) return false;

    let key = this.obj.FundCode + obj?.PayWith.split(/[ ,]+/).join('-');
    return this.store[key].status == 'fail';
}

You can then use this variable in your HTML code:

<div *ngIf="isFailed"> test </div>

This approach will make your code clearer and potentially resolve your issue.

To learn more about the get function, visit the Mozilla Developer Network site.

Answer 2

I prefer avoiding complex syntax within HTML, even if it is valid; it can lead to confusion.

Instead of using complicated syntax, you can utilize the getter function as a variable, like this:

get isFailed() : boolean {
    // To prevent errors, check if obj is defined.
    if(! this.obj) return false;

    let key = this.obj.FundCode + obj?.PayWith.split(/[ ,]+/).join('-');
    return this.store[key].status == 'fail';
}

You can then use this variable in your HTML code:

<div *ngIf="isFailed"> test </div>

This approach will make your code clearer and potentially resolve your issue.

To learn more about the get function, visit the Mozilla Developer Network site.

Utilizing the split function within an ngIf statement in Angular

Answer №1

Similar questions

Enhancing the menu/navigation bar with individual AJAX loaders

Refreshing a value in the view at regular intervals using a filter in Vue

Developing a common module for use across deferred loading paths

Discovering all the links present on a webpage using node.js

Saving base64 encoded pdf on Safari

Ways to conceal an animated gif once it has been downloaded?

When using Material UI, I ran into an issue where my Card Component was being added to my Appbar. To improve user interaction, I desire for the cards to only appear once

Not all API results are being displayed by the Nextjs API function

Ways to implement material-ui button design on an HTML-native button

Retrieve the value of a property within the same interface

How can I set a document ID as a variable in Firebase Firestore?

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

Is there a way to use JavaScript/jQuery to randomly resize images every time the page loads

Ways to modify the input field value in my form based on the current page context

What is the process of converting an Array that is nested within an Object?

Unable to get i18next functioning in my Node.js Express backend

The issue of the window.open method malfunctioning on Internet Explorer 9

Setting the [required] attribute dynamically on mat-select in Angular 6

Determining the condition of the menu: understanding whether it is open or closed

Updating the DOM after scrolling using jQuery