What is the reason for IE displaying null when the model does not exist?

Why does IE 11 render 'null' if my model does not exist? For instance:

<tr>
    <td [innerHTML]="model?.prop1 | my-pipe"></td>
</tr>

Imagine this scenario: When the page loads, a request is sent to the server and the response is in JSON format with a prop1 field. If the server responds with a 404 error (or any other error, the reason is irrelevant), my model becomes null and IE 11 browser displays NULL within the td tag, whereas FF and Chrome display an empty space in this tag.

P.S. I am curious about the rationale behind this behavior. I am aware of how to resolve it. Thank you.

javascriptangulartypescript

Answer №1

This issue has been identified as a known bug and is currently being tracked as an Edge problem, as mentioned in this comment. Unfortunately, it seems highly unlikely that there will be a fix for Internet Explorer, and some may even consider it impossible.

If you're looking for a workaround, one solution is to use *ngIf:

<td *ngIf="model?.prop1" [innerHTML]="model?.prop1 | my-pipe"> </td>

In cases where the issue arises with attributes, like so:

<textarea [value]="model?.prop1"></textarea>

You can try using attr.value instead:

<textarea [attr.value]="model?.prop1"></textarea>

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

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

Error in Angular Protractor e2e test due to iteration function on mat-radio-group innerText

clickOnQuestionsOption(optionName) { const radioButtonList = $$('mat-radio-group > mat-radio-button'); const selected_btn = radioButtonList.filter(elem => { return elem.getText().then(text => { console.log(tex ...

angularprotractorradio-group

Downloading a CSV file using Angular 8 and Django RestFramework

I am a beginner in Angular and I'm looking to implement a feature where users can download a CSV file upon clicking a download button. Django viewset @action(detail=False, methods=['get']) def download_csv(self, request): data = { ...

pythondjangoangulardjango-rest-framework

Sending out a command does not equate to establishing Redux with an outcome

I've been grappling with this issue for the past 18 hours and I'm at a loss to figure out what's causing the problem. My redux setup is working smoothly as it dispatches actions and receives state correctly for other components. However, in ...

javascriptreactjsredux

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

I have developed a basic React application using Next.js with an integrated express server: app.prepare() .then(() => { const server = express() server.get('/job/:id', (req, res) => { const actualPage = '/job' const ...

javascriptnode.jsreactjsmaterial-uinext.js

Tips for incorporating conditional types into function parameters based on existing input

The title might be confusing, so allow me to clarify. My Objective I am referring to the code snippet below. I aim to specify the route property based on the types property as either a string or a function that returns a string. The Code Let's b ...

typescripttypescript-generics

Identification of input change on any input or select field within the current modal using JavaScript

My modal contains approximately 20 input and select fields that need to be filled out by the user. I want to implement a JavaScript function to quickly check if each field is empty when the user navigates away or makes changes. However, I don't want t ...

javascriptjquerybootstrap-modal

conversion of text to number using JavaScript

After pulling values from an XML file using JavaScript, I face the challenge of converting a string to an integer in order to perform calculations. To extract data from the XML file, I use the following snippet: var pop = JSON.stringify(feature.attribute ...

javascript

Error in GraphQL query: specified argument is mandatory, yet not supplied

I recently started learning about graphql and encountered an issue with my query. Here is the code I am using: { product { id } } "message": "Field "product" argument "id" of type "String!" is requir ...

javascripttypescriptgraphqlbackend

Adding a character to an AngularJS textbox

I am attempting to add the "|" Pipe symbol to a textbox when a button is clicked, using this function. $scope.appendPipe = function(){ var $textBox = $( '#synonyms' ); $textBox.val($textBox.val()+'|'); //textBox ...

javascriptjqueryangularjs

Having issues with parameterized URL integration between Django2 and Angular2

I am encountering an issue with integrating a URL containing parameters in Angular and Django. When making a call to the url, Django expects a slash at the end while Angular appends a question mark before the parameters. How can this be resolved? Below is ...

djangoangularurlintegration

Setting up of imagemagick node module using linuxbrew

Having trouble installing imagemagick-native as it's showing an error. Tried using the following command to install: npm install imagemaick-native --save > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c45414d ...

javascriptnode.js

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

Modifying form data when submitting a form

Is there a common or widely-used method for modifying or adding form values before they are serialized and sent to the server upon form submission? I'm looking for a way to change or add these values without having to recreate them. I've come ac ...

javascriptjqueryhtml

Blocking negative values when a button is clicked in Vue.js using v-on:click

How can I prevent the counter from going below 0 when clicked in this Vue component? Do I need to create a separate method to block it? Thank you for your assistance. <button v-on:click="counter.document -= 1">-</button> <h3>{{coun ...

javascriptvue.js

Mastering the implementation of type refinements for io-ts in processing input data

I have implemented io-ts for defining my typescript types. This allows me to perform runtime type validation and generate type declarations from a single source. In this particular scenario, I aim to create an interface with a string member that needs to ...

typescriptvalidationtypes

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

javascriptcssreactjstypescriptvue.js

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

javascripthtmlcsschar

Inspect the TypeScript typings within Svelte documents directly from the terminal

When I run tsc --noemit, it successfully checks for type errors in the codebase. However, I have encountered an issue where it does not seem to check .svelte files. Is there a way to enable this functionality? I can see the type errors in .svelte files wh ...

typescriptsvelte

Is there a way to perform a nextAuth sign in using Postman?

I am currently working on implementing user authentication using NextAuth. The authentication works perfectly within my webapp, but now I want to test the sign-in functionality using Postman so that I can share the login endpoint. Below is the configuratio ...

javascriptnext.jsnext-auth