I came across a dataset that resembles the following:
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']
)}
Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...
I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...
I currently have an Angular2 active guard in place to handle redirection to the login page if the user is not logged in: import { Injectable } from "@angular/core"; import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from ...
This is the code snippet from item.ts file:- export interface item{ $key?:string; available?:boolean; countable?:boolean; iname?:string; price?:string; desc?:string; image?:string; } The items component item.componenet.ts looks like this:- import { Com ...
When attempting to implement server-side rendering for my Angular 6 app, I encountered the following error while using the Angular CLI universal demo as a reference: Property 'render' does not exist on type 'NextFunction'. This is the ...
After starting my first Angular2 app, I encountered an issue where I couldn't use gulp to compile for es5. Below is the dependencies file: "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/compiler-cli ...
Within my angular cli project, the setup includes: angular-cli.json: "styles": [ "styles/styles.less" ], styles.less: @import 'general'; general.less: .pointer { cursor: pointer; } In the component's styles .less file, ...
Many examples use the Observable.subscribe() function in AngularIO. However, I have only seen anonymous functions being used like this: bar().subscribe(data => this.data = data, ...); When I try to use a function from the same class like this: update ...
I keep encountering an error message that says "friend.toLowerCase" is not a function when I use Ionic's search function. The unique aspect of my program is that instead of just a list of JSON items, I have a list with 5 properties per item, such as f ...
Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced: Even though I have installed &apo ...
I am working with a TypeScript class component and have successfully created a context that can be accessed globally. I am interested in learning how to implement this context in a .ts class component and if it is possible to use it in a pure TypeScript ...
I found a question that is similar to mine, but I think my case (with version 2) has enough differences to warrant a new discussion. I'm curious about the specific purpose of calling bootstrap() in an Angular 2 application. Can someone explain it to ...
After choosing an image with the Image Picker, I get a content// URL content://com.android.providers.media.documents/document/image%3A139 However, when using ImageSource.fromAsset(), I receive an empty object. My main objective is to save this image as a ...
I'm currently in the process of learning Angular 2, so please bear with me if this question seems trivial. I am attempting to create a dynamic form that can be bound to a model. However, I am encountering an issue where I am unable to initialize my ar ...
I have a Form, with various fields that I want to get the value of using v-model and assign them to ref objects. In order to populate my FormData object with this data, I require both the name and the value of the ref objects. Unfortunately, I am struggli ...
When attempting to execute a GraphQL request using the npm package graphql-request, I am exploring the use of template literals. async getCandidate(userId: number) { const query = gql` query($userId: ID){ candidate( ...
I'm having issues with applying styles using @material-ui/core in my React app. Some of the styles are not being applied properly. You can check out my sandbox for the full code (relevant snippets below). Although I followed the instructions from Ma ...
I am currently working on an application that includes child routes. The parent component (App component) consists of 2 routes: @RouteConfig([ { path: '/overview', name: 'Overview', component: OverviewComponent, useAsDefault:true }, { ...
Currently, I am in the process of teaching myself Angular coding but have encountered an issue. While working on developing an app for personal use, I successfully integrated the Angular Material Dialog into a wrapper service without any problems. In one o ...
I've been facing an issue with my web application in efficiently checking if it is firebase authenticated. The 'auth state object' doesn't seem to be functioning correctly on my template, as the expected sections are not appearing at al ...