I came across a dataset that resembles the following:
https://i.sstatic.net/S0YyO.png
Within my app.component.html, I have written this code snippet:
<ul>
<li *ngFor="let data of myData">{{data.id}}</li>
</ul>
However, when I execute this code, it only displays empty lists, resulting in numerous dots from the <li> tags.
In my app.component.ts file, I declared:
myData;
Followed by:
this.myData = obj; // Obj contains the data
How can I resolve this issue?
<ul *ngFor="let item of myData">
<li>{{item.id}}</li>
</ul>
Instead of creating multiple <ul> elements, you should have multiple <li> (list item) elements:
<ul>
<li *ngFor="let item of myData">{{item.id}}</li>
</ul>
It seems like you may have created the array object in this way:
myData = [
{
'@attributes:': 'id:1'
},
{
'@attributes:': 'id:2'
}
];
This is incorrect and should actually be structured like this. Please double-check your array or array object.
myData = [
{
attribute: 'abc',
id: 1
},
{
attribute: 'bcs',
id: 2
}
];
And in your HTML file:
<ul>
<li *ngFor="let data of myData">{{data.id}}</li>
</ul>
Set the data into a variable named myData by following this example:
To assign data to myData variable:
this.myService.myFunction().subscribe(res=>
this.myData = res['listResponse']['@attributes']['instance']
)}
In my Angular application, I have successfully implemented horizontal scrolling of cards. Now, I am looking to enhance the user experience by adding "Left" and "Right" buttons that allow users to scroll in either direction within their specific msgCardDeck ...
Hey there! I'm fairly new to Angular 2 and have been trying to tackle this issue for a while now. I have a user object that contains another nested object, defined by the User interface: export interface UserModel{ name: string, service: Service ...
I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...
My ngx-datatable has 4 data columns and a delete button column to remove rows from the table. https://i.stack.imgur.com/MbGDM.png Here is the HTML code: <ngx-datatable *ngIf="!isLoading" #table class="data-table" [scrollbarH]="true" [rows]="data" [co ...
As I receive HTML strings from an external source, my goal is to filter out all links that contain images, remove the href attribute, and replace it with a click event. I have attempted to achieve this using an Angular pipe, but so far I have only been suc ...
For my school project, I am using Express.js with TypeScript to create a simple app. This router is used for the edit page of a contact list we are developing. It displays the ID of the current contact being edited in the search bar. The problem arises whe ...
Visual Representation of File Structure export class FaqService { public inputValue; constructor(private http: Http) {} ngOnInit() {} setData(val) { this.inputValue = val; console.log(this.inputValue); } getData() { return this.inputValue; } ...
I am looking for a specific type: interface Filter<P extends object> { label: string; options: FilterOption[]; key: StringArrayKeyOf<P>; } The definition of StringArrayKeyOf is as follows: type StringArrayKeyOf<T extends object> = ...
Currently, I have 8 custom Modals that are called in various places within my app. These modals are currently located inside the app.component.html as shown below: <agc class="app-content" [rows]="'auto 1fr'" [height]=" ...
I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...
I have a basic component that does not utilize the DomSanitizer. Let's call it export class ExampleComponent { @Input() public safeHtml: SafeHtml | undefined; } How can I incorporate the DomSanitizer in a unit test? I have attempted to prov ...
I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...
My bar chart is behaving strangely - when I click on all labels, it only shows two days instead of updating as expected. I suspect it may be due to a bad implementation involving parsing. Can anyone provide assistance? I have created a minimum example on ...
When working with union typed values in an object array, how should the setState() function be implemented? enum SomeStateEnum { IsRunning, Name, } type PersonState = { [SomeStateEnum.IsRunning]: boolean; [SomeStateEnum.Name]: string; }; const st ...
Currently, I am engaged in a project using Angular2 and Firebase. My goal is to consolidate all query results under a single key called this.guestPush. Within my project, there is a multiple select element with different user levels - specifically 4, 6, ...
Objective: Retrieve data and showcase it in a dialog box using the button located in the Button column. Essentially, clicking on one of the buttons will display the corresponding data in the dialog. Challenge: Currently, I can only extract hardcoded s ...
As I dive into the Angular code, I encountered a peculiar type for a property within an Interface named 'Origin' that has left me perplexed. Here's the snippet: export interface Origin { areaNum?: number; open?: { [key: stri ...
https://i.stack.imgur.com/uKKKp.png Lately, I delved into the world of Angular and encountered a perplexing issue in my initial project. The problem arises when I attempt to run the application using ng serve.https://i.stack.imgur.com/H0hEL.png ...
Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...
Currently, I am working on writing Jest-enzyme tests for a basic React application using Typescript along with the new React hooks. The main issue I am facing is with properly simulating the api call made within the useEffect hook. Within the useEffect, ...