Problem with Angular 5: Data Binding Issue未知EncodingException

Struggling to understand... I want to make a GET request to my service to retrieve the specific hardware associated with the barcode I scanned - this part is working correctly.

The hardware information is returned as an object that looks like this ->

https://i.sstatic.net/sCN8e.png

However, when I try to display this object on my frontend, all I see is [object Object].

component.html

{{ terminal }}

component.ts

terminal: any[] = [];

constructor(private terminalService: TerminalService) { }

this.terminalService.getTerminalByBarcode(barcode).subscribe(terminal => {
   console.log(terminal.terminal);
   this.terminal = terminal.terminal;
});

I've even attempted using terminal: Object;, but it hasn't made a difference. Can anyone point out where I might be going wrong with two-way data binding?

angulartypescriptdata-binding

Answer №1

If the variable terminal.terminal is an object, when you use {{ terminal }}, it will display as [object Object] because it invokes the toString method on that object.

To view the structure of the terminal, you can utilize the json pipe.

{{ terminal | json }}

Answer №2

The reason is that in your view, you are attempting to display the actual object .toString.

Instead, you should display the properties of the objects as shown below:

{{ terminal.barcode }}
{{ terminal.dateArrival }}

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

Validate uniqueness of input in database using Angular's async validator

My <input> element allows users to enter a value that should be unique in the database. I'm looking for a way to validate this input dynamically on the front-end, and display an error message if the value is already in the database. ...

angularvalidationasynchronousangular-custom-validators

Defining a JSON file interface in Angular to populate a dropdown box with dependencies

I've embarked on an exciting project to develop a cascading dropdown box filter, and it's proving to be quite challenging. I'm taking it step by step to ensure clarity. I have obtained a JSON file containing the data required to populate de ...

angulartypescript

Discover the art of customizing chart series color

How do I change the color of a series in a chart? I am trying to customize the color of a specific item on my pie chart. <kendo-chart-series-item type="pie" [data]="source" field="value" [color]="color ...

jsonangularpie-chartkendo-ui-angular2kendo-chart

Can I modify a global array by updating a dynamically created array in the ngOnInit method of Angular?

Are there any suggestions on how to make a dynamic array available globally in Angular? I am currently using this codepen () which stores clicked countries in an array. The issue is that the array is nested within a function in ngOnInit and I need it to b ...

angulartypescriptamcharts

Concealing the parent view in Angular 2

I need to hide the above parent view. https://i.stack.imgur.com/CZFTn.jpg Here is my code. Upon clicking any of the boxes, the parent should be hidden and the child should appear. <app-navbar></app-navbar> <div class="cont ...

angular

Display the toggle button for expanding/collapsing text only when the length of the string exceeds 50 characters

Is there a way to only show a "read more/less" button in a table if the content exceeds 50 characters? The table contains a mix of content, some short announcements with about 10 characters and others with over 100. <div class="col"> <span ng-c ...

jqueryhtmlangularcss

The namespace does not have any exported object named 'LocationState'

I encountered the following issue while attempting to execute my TypeScript application: Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'. Here is a snippet from my pack ...

javascriptnode.jstypescriptnpm

A comparison of parent and child components

To implement a child-parent component relationship in Angular, first create two JSON files: parent.json and child.json. The parent.json file should contain the following data: "Id":10001, "name":"John" "Id":10002, ...

javascriptjsonangular

What is the best way to access a ViewChild element in the parent component without rendering it?

I am currently utilizing a component within another component in the following manner: <inline-help> <help-title>{{::'lang.whatIsThis'|i18n}}</help-title> <help-body i18n="lang.helpBody">& ...

javascriptangularviewchild

Typescript encounters difficulty locating the designated interface

Within my Aurelia View-Model, I am working on a Typescript file that contains the following structure: import {Chart} from './chart'; interface IMargin { top: number, right: number, bottom: number, left: number } export class App{ cha ...

typescriptaurelia

What is the reason behind TS not using Symbols for enums?

When it comes to enums, ES6 symbols provide a great solution for avoiding collisions. Initially, I assumed that TypeScript's enum type used Symbols for enums if the target was set to 'es6', but it turns out it doesn't: enum Role {Emplo ...

typescriptenums

best practice for updating a node in ng-zorro-antd tree

I'm attempting to make changes to the node titles in a tree structure. I have learned that the tree will only show these updates if the nodes array is changed by reference (as shown in the example). However, when I update the nodes, the tree flickers ...

angularantdng-zorro-antd

Enhance the performance of page loading and implement a consistent spinner feature to ensure smooth transitions for users in Next.js version 13

I am currently working on a project using Next.js 13, and I am encountering issues with slow loading times and an unstable spinner when navigating between pages. Specifically, when transitioning from the home page to the /example page, the experience is n ...

javascriptreactjstypescriptnext.js

Learn how to retrieve data from a parent component in Angular 8 by leveraging the window.opener property in a child window

On my Angular application, I have 2 separate pages - page1 and page2. Page1 has a button that, when clicked, opens page2. Since they are different components, I need to use window.opener to access data from page1 in page2 by calling window.opener.page1Func ...

angularwindow.openwindow.opener

Encountering issues with MatTable functionality in Angular version 10

Could it be that I’m starting this project from scratch using Angular Material 10, a framework I’m not familiar with yet, or am I simply missing something? My mat-table isn’t showing up on the page at all, which is completely new to me. Here’s the ...

angularangular-materialangular-material-table

Instantiate a child class within an abstract class by utilizing the keyword "this"

Within my code, there is an abstract class that uses new this(). Surprisingly, this action is not creating an instance of the abstract class itself but is generating an instance of the class that inherits from it. Even though this behavior is acceptable i ...

javascripttypescript

What is the best way to extract accurate information from an observable?

I'm having trouble retrieving the correct data from an observable in my project. Here is the code for my API call: getLastxScans(amount: number): Observable<Scan[]> { return this.http.get<Scan[]>(`${this.ROOT_URL}/Scan/amount/${amo ...

angulartypescriptrxjsobservable

Enhancing TypeScript Native Interface Properties in TypeScript 2.4

After discovering an error in the native Typescript interface for HTMLTextAreaElement, I realized the need to make a correction. The current interface looks like this: interface HTMLTextAreaElement { setSelectionRange(start: number, end: number): void; ...

typescripttypescript-typings

When using ngFor, a conversion from a string literal type to a regular string occurs, resulting in an error that states: "Element implicitly has an 'any' type because an expression of type 'string' cannot be utilized..."

When utilizing the iterator *ngFor, it converts a string union literal type ("apple" | "banana") to a string type. However, when attempting to use it as an index of an array expecting the correct string union literal type, an error occu ...

angulartypescripttemplatesngforstring-literals

Tips for creating a Bitbucket pipeline to deploy an Angular Universal application

I'm currently working on deploying my Angular universal app on a server using Bitbucket pipelines. The scripts I've written in bitbucket-pipelines.yml are as follows: pipelines: default: - step: name: Build app caches: ...

angularpipelinecontinuous-deploymentangular-universalbitbucket-pipelines