Angular 6 and the intricacies of nested ternary conditions

I need help with a ternary condition in an HTML template file:

<div
*ngFor="let $m of $layer.child; let $childIndex=index"
[Latitude]="$m.latitude"
[Longitude]="$m.longitude"
[IconInfo]="$childIndex== 0 ? _iconInfo1:$childIndex== 1 ? _iconInfo 
:$childIndex== 2 ? _iconInfo2:$childIndex== 3 ? 
_trunkLocMarker1:_trunkLocMarker"></div>

Now, I want to modify the value of a particular property in IconInfo based on a condition like this:

if($m.propertyValue > 1000){
  _iconInfo1.property = 'someValue';
}

However, when I tried to incorporate this into the existing ternary condition, I encountered an error:

[IconInfo] = "$childIndex== 0 ? _iconInfo1:$childIndex== 1 ? _iconInfo :$childIndex == 2 ? _iconInfo2 : ($m.totalMou > '1000' ?_iconInfo2.fontSize = '48' : _iconInfo2.fontSize = '48'): $childIndex == 3 ? _trunkLocMarker1 : _trunkLocMarker "

The error message stated:

Uncaught Error: Template parse errors:
Parser Error: Bindings cannot contain assignments

If anyone could provide a solution or suggestion, it would be greatly appreciated.

Thank you!

javascriptangulartypescriptngforconditional-operator

Answer №1

The issue here is with assignments in your code. There are two of them (remember, `=` denotes assignment).

$m.totalMou > '1000' ? _iconInfo2.fontSize = '48' : _iconInfo2.fontSize = '48'

Just a heads up: It's not advisable to have multiple nested ternary conditions, especially within the template. This can make the code difficult to understand. I recommend moving that logic to the TypeScript file for better organization.

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

Pseudonym fields used for parsing JSON data

On my homepage, users have the ability to upload JSON fields that require parsing. I am specifically looking for certain fields that may have numerous alias names. I am uncertain about the best approach to take in order to identify these aliases. Currentl ...

javascriptjsonnode.jsexpress

The parent-child relationships in MongoDB

In my Meteor application, I have created two collections: ActivityCards and Users. Inside the ActivityCard collection, there is a reference to the User like this: { "_id" : "T9QwsHep3dMSRWNTK", "cardName" : "Guntnauna", "activitycardType" : 1 ...

javascriptmongodbmeteorcollections

When attempting to redirect to a different page using setTimeout, the loading process appears to continue indefinitely

Currently, I am utilizing the following script: setTimeout(function(){ window.location.href = '/MyPage'; }, 5000); While this script successfully redirects me to /MyPage, it continuously reloads every 5 seconds. Is there a way to r ...

javascripthtmljqueryblogger

Display two elements within a single table column by utilizing an array in Vue.js

I have a requirement to display 2 items from an array in one table TD ( column ). Below is the example mock data provided: agendas: [ [ { tag: 'p', class: 'm-agenda__date', value: & ...

javascriptvue.jsvuejs2

Unable to locate "Gruntfile.js" Node module for task execution

I am currently in the process of developing a module that enables node to execute Grunt tasks via the command line. This Node module is globally installed at : C:\Users\pcharpin\AppData\Roaming\npm\node_modules\task-app ...

javascriptnode.jscommand-linegruntjs

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

javascriptjquerycssfont-face

Guide on building a Dynamic factory in AngularJS

For my project, I need to implement a dynamic factory in AngularJS with a unique name. Here is an example of what I am trying to achieve: function createDynamicFactory(modId) { return myModule.factory(modId + '-existingService', function ...

javascriptangularjsangularjs-directiveangular-services

What is the best way to insert a newline in a shell_exec command in PHP

I need assistance with executing a node.js file using PHP. My goal is to achieve the following in PHP: C:proj> node main.js text="This is some text. >> some more text in next line" This is my PHP script: shell_exec('node C:\pr ...

javascriptphpnode.jscmd

How to preselect an item in a RadioGroup

We are facing a challenge in setting a default value automatically for a RadioGroup upon page load. Despite the documentation mentioning a defaultValue property (https://material-ui.com/api/radio-group/), it does not seem to work as expected. We experimen ...

javascriptmaterial-ui

Is there a way to implement field validation in a Vue wizard form?

Trying to implement form validation using Joi in a Vue wizard form, but not sure how to set it up correctly. The objective is to control the fields before progressing to the next and final page using the next() method. I want to keep the simplicity of th ...

javascriptformsvue.jsjoi

Utilize Ajax to invoke a function simultaneously with another Ajax call that includes preventDefault to submit the data

I am currently implementing two AJAX calls within my form. The first call is used to dynamically update the options in the second select element based on the value selected in the first select element. This call reaches out to a PHP page to process the dat ...

javascriptphpjqueryajaxclean-urls

unable to retrieve the city name through geographical location information

I am currently using the following code snippet to retrieve the country and city names: <?php $user_ip= getenv('REMOTE_ADDR'); $geo= unserialize(file_get_contents("http://www.geoplugin.net/php.gp?ip=$user_ip")); $city= $geo["ge ...

javascriptphpjquerygeolocation

Optimizing the Placement of Dynamic Google Maps

After setting up a responsive Google map using this jsFiddle and guidance from this stack overflow post, I encountered an issue. How can I keep the map centered on the marker across various viewports and browser sizes? I came across a solution in this res ...

javascriptjquerygoogle-maps

Tips for getting Angular's HttpClient to return an object rather than a string?

How can I make HttpClient return the data in JSON Object format? The Angular documentation states that HttpClient should automatically parse returned JSON data as an object. However, in my project, it only returns the data as a string. Although using JSO ...

jsonangulartypescript

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

javascripthtmlcssdom

Transferring data from AJAX form in JavaScript to PHP function

My website features a login form that sends data, such as email address, to a PHP function and initiates the creation of a user. I am looking to include additional information on the page where the form is located. Here is the data I want to include in t ...

javascriptphpajax

Enhance TypeScript class declarations with additional properties

Our company has developed its own test framework for our software because we found it difficult to use an open-source framework within the context of our specific development needs. Recently, I took on the task of creating Typescript Definition Files to e ...

typescriptclassinner-classesextendoverwrite

Invoking a JavaScript class using a script tag

In my code, I have a class declaration in a script that is imported before the body tag: $(document).ready(function(){ var FamilyTree = function() { }; FamilyTree.prototype.displayMessage=function() { alert("test"); } }); Then, within the bo ...

javascriptclass

"Using SetState frequently results in multiple rerenders of the component

Currently, I am developing a messenger application with a main screen component that displays all messages. My goal is to make sure that whenever a user sends or receives a message, the component updates the Flatlist to show the latest sent message. To ach ...

javascriptreactjsreact-native

Is there a method to extract the y value for a specific x value that is not part of the current data set in a Chart.js graph

I have a set of data points like { x: 5, y: 10 }, { x: 10, y: 15 }, { x: 20, y: 25 }. With Chart.js, I can easily create a chart based on these points. Is there a method to retrieve the y value for a specific x value, such as 13, from the rendered chart? ...

javascriptvue.jschart.js