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 most efficient way to establish a connection to "host:port" without relying on a web browser, utilizing only Node.js/JavaScript?

To establish a connection with a server (created using node js), we simply open the browser and include some code in a file like this: <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script> <script type="text/javascript">/* ...

javascriptnode.jssocket.io

Encountering Webpack issues following the transition to Next 13

Since updating Next to version 13, we've encountered issues with our application not building properly. It appears that webpack is having trouble with imports, exports, and potentially typescript. ../../libs/queries/src/lib/groq/searchFaq.ts Module pa ...

javascriptreactjstypescriptwebpacknext.js

Discovering the method to extract a specific section from a lengthy string

Looking to extract phone numbers from an HTML source code using PHP? Each phone number in the code starts with 'phone=' and ends with %. For example, consider the following sample HTML code: b2e1d163b0b4dc6ebfa5&amp;t=s&amp;phone=9535503 ...

javascriptphpjquery

JQuery is having trouble with playing multiple sound files or causing delays with events

I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...

javascriptjqueryhtmlaudiosettimeout

It appears that Next.js's useDebouncedCallback function is not effectively delaying the request

I am currently learning Next.js and trying to work through the tutorial. I have hit a roadblock on this particular page: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination Despite conducting an extensive web search, I couldn't find a ...

javascriptreactjsnext.js

Incorporating npm packages into an Angular2 (v2.0.0-rc.1) application

Struggling with integrating npm libraries into my Angular2 app has been a challenge, especially when trying to include https://github.com/manfredsteyer/angular2-oauth2. Every time I try to import the library, I encounter a 404 error. Even after adding the ...

angularnpm

Looking to Move the Image Up?

I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one a ...

javascripthtmlcsswebstorm

``Incorporating event and parameter as arguments for a function in an Angular application: a tutorial

I am trying to incorporate a checkbox in Angular where if it is enabled, the event.target.checked value is true, and if it is disabled, the event.target.checked value is false. When clicking the checkbox, I need to call a function where I want to pass the ...

angulartypescript

Reactivity in Angular Autocomplete with API Integration

I went through all the tutorials on Angular Autocomplete using API to follow the steps. I implemented valueChanges to monitor the form control, used switchMap to send a new request with each keyword change, and then displayed the data in the autocomplete d ...

angulartypescriptangular-materialautocomplete

Upon submission, the form is processed and 'false' is returned

Does anyone know how I can use ajax to save form data? I am encountering an issue where the page refreshes when all entries are correct. If I input any incorrect data and submit, it displays an error. However, if I then fill in all correct information, it ...

javascriptphpjqueryajax

Ways to make the current day stand out in a date picker calendar

Utilizing the ng-bootstrap datepicker, I am attempting to showcase an inline calendar in my application. However, the calendar fails to display the current day correctly, as depicted below: Despite trying various solutions, I have been unable to rectify t ...

angularbootstrap-4ng-bootstrap

You can activate Lightgallery just one time in VueJs

I am facing an issue where lightgallery can only be opened once. Subsequent clicks on the button are unresponsive. The lightgallery is being used as a component. Within my parent component, I have two buttons for opening image or video gallery ParentComp ...

javascriptvue.jsvuejs2lightgallery

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

The interplay between javascript and PL/SQL tasks in a dynamic scenario

I'm attempting to run multiple pl/sql blocks within a Dynamic Action, providing real-time feedback to the user through a modal dialog displaying the current status. Here is an example of what I am trying to achieve: Processing Step 1... /*Run pl/s ...

javascriptajaxoracle-apex

Using Jquery to update the information displayed in a div class to show more details about the clicked video

I am currently developing a video playlist similar to YouTube for my hybrid app. I am fetching and displaying the data using functions from json data provided by the web server. Below is a sample of the json data: [{"video_id":"1","video_youtube_title":" ...

javascriptjqueryhtmlyoutube

Troubleshooting the Angular Fullstack + CORS issue: "XMLHttpRequest cannot load

I've been wracking my brain trying to figure this out. Utilizing the yeoman generator angular-fullstack, I created a simple Angular app on a NodeJS server with Express. The app makes remote service calls, so there are no API server side calls within ...

javascriptangularjsnode.jsexpresscors

How to conditionally apply a directive to the same tag in Angular 4

I am implementing angular 4 and have a directive in my template for validation purposes. However, I would like to first check if a specific condition is true before applying the directive. Currently, my code looks like this: <div *ngIf="groupCheck; els ...

angulartypescriptdirectiveangular-ng-if

What is the most effective method for storing an object in React?

I am facing an issue with storing my Object of my Checkout-Cart in a React Variable. I attempted to use the useState Component, but unfortunately, it did not work. Here is the object that I receive from my NodeJs Backend : [ { product_uuid: '3b ...

javascriptnode.jsreactjs

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

htmlangulartypescriptangular-material

Discover the position within a two-dimensional array

Suppose I have an array that contains objects, and each object has its own id property. In this case, I can find the index by writing: data.findIndex(x=>x.id === newData.id); Now, if data is an array of arrays of objects, how can I efficiently get two ...

javascriptarraysecmascript-6