I am working with an array in my TypeScript file that looks like this:
let order : any[] = [
[{order_id:1,order_name:"car"},{order_id:2,order_name:"honda car"},{order_id:3,order_name:"bmw car"}],
[{order_id:4,order_name:"honda city car"}],
[{order_id:5,order_name:"mercerdeces car"}],
]
Can someone please explain how to efficiently display this type of data in an Angular application using the ngFor directive?
Implement *ngFor two times in your code.
<div *ngFor="let element of array">
<div *ngFor="let subelement of element">
{{subelement.name}}
</div>
</div>
If you're looking to display all the objects in your template, one option is to flatten your matrix and convert it into a one-dimensional array. Then, you can use *ngFor inside a div or ng-container.
order.flat(2)You can print all the orders directly by looping through them like this:
<ng-container *ngFor="let item of orders">
{{ item.order_name }}
</ng-container>If you want to display all the nested arrays, you can try something similar to the following:
<ng-container *ngFor="let order of orders">
<div *ngIf="order.length > 1">
<ng-container *ngFor="let item of order">
{{ item.order_name}}
</ng-container>
</div>
{{ order.order_name }}
</ng-container>I'm currently working on an application and I'm experiencing some issues with IE 10. The captcha text displays correctly the first time, but when I try to refresh it by clicking the button, it doesn't seem to work. My guess is that there&apo ...
As I delved into learning JavaScript and/or react, I found myself a bit confused about the concept of .bind(this) in the constructor. After some clarification, it seems clearer now. My question now is, why would someone opt for Binding over an Arrow-functi ...
I've been scouring the internet for answers to my unique issue with a Bootstrap 5 carousel. My setup is fairly basic, but I've removed the buttons and rely solely on swiping to navigate through the carousel items. When I swipe left to right, eve ...
Check out my code example on jsfiddle: https://jsfiddle.net/elenderg/wzarrg06/63/ In the first div, there are 10 buttons. See image below: https://i.sstatic.net/BDdtG.png <button class='btn btn-info custom' onclick="myFunction()" ...
Can I compare the start and end times in the Yii2 client/ajax validation for my form? https://i.sstatic.net/bC48T.png This is how my view file code looks: <?php foreach ($model->weekDaysList as $index => $value) : ?> <div class="row"& ...
I am having trouble retrieving data with my query to find all objects within the last hour based on timestamps: Here is the schema I am using: var visitSchema = mongoose.Schema({ timestamp: { type: Date, default: Date.now }, userID: String, userName ...
As someone who is new to programming, I am currently exploring Javascript, node.js, and express. I came across a question regarding the usage of app.use(express.static(path.join(...))); versus app.use(app.static(path.join(...)));. const app = express(); co ...
I am facing an issue where I have two components named Index and Create, loaded from separate blade files. The challenge is passing a flash message as a prop between these components due to their file separation. How can I redirect after submitting a form ...
I'm facing an issue with a script in express. I have a function that renders a view upon the success of another function. This project involves angular, node, express, and ejs as the view engine. However, when I try to render the view, I encounter an ...
How can you extract the second item from the forecast array without specifying the 'date' value? Right now, you need to include the date like "2020-01-27" to retrieve the data. These attempts weren't successful... {{ forecast.value[1].hourl ...
{ "workingHours": [ { "date":"2023-02-01", "amount":3, "freigegeben":false } ] } Whenever I include this in my re ...
I am currently working on a form using Angular and facing a challenge with a specific section. Within the form, there is a 'Divisions' segment that includes a list of checkboxes generated dynamically from an API call. Users are required to selec ...
After reading several discussions on using on() to link events to dynamically generated HTML elements, I decided to create an example (FIDDLE) where the click event is bound to elements div.clicktitle fetched via AJAX. These div elements contain data attri ...
I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...
I am currently engaged in a project for a small theater group, and I am facing challenges with getting this loop to execute properly. <% include ../partials/header %> <div class="jumbotron jumbotron-fluid"> <div class="container"> ...
I am encountering a similar issue as described in the thread Twitter Typeahead Ajax results undefined. Since that problem remains unresolved, I am revisiting the topic with hopes of shedding light on any missing details. My setup includes standalone Typea ...
I have a main template along with two others that are displayed using Iron routing: <template name="main"> <div id="templateMain" name="templateMain"> <a href="nfnoscar">The Legend of NFN Oscar</a> <br/> <a h ...
For all code regarding this issue, please visit: Filter: <input type="text" ng-model="search"> <tr ng-repeat="(id, group) in groups | filter:search" class="editing-{{group.editing}}"> The goal is to have the rows filtered out based on the in ...
I am currently working on developing a versatile repository using: Typescript ES6 Angular 1.x However, I am facing challenges in determining the correct way to inject the Entity and retrieve its module name. The main reason for needing the name: I adh ...
When using QueryTask in ArcGIS JS Api 3, I encountered a challenge where I needed to execute multiple queries in one call. After referencing the documentation, I realized that this functionality was not directly supported. This is my current implementatio ...