So I have an array that I need to display, problem is the array can't be populated until the page is already displayed and the user has entered a value
Stepping through my code I can see that the array is being populated correctly, however, the view isnt updated
I'm able to update it using this and an on click event
onAddClick(){ this.CarTypes.push(newAddCar("1",true,true,1,1,"1","1"))
}
But when I call it through a method, it doesn't update, even though the parameters are 100% correct
add(NMsg:string, Nom: boolean, show: boolean,image: number, order: number, id: string, name:string){
this.CarTypes.push(newAddCar(NMsg,Nom,show,image,order,id,name))
}
Can anyone help?
<div>
<!--<ul *ngFor="let cars of CarTypes" (click)="Click(cars)">
{{ cars.CarTypes.length ? cars.CarTypes[0].Name : '' }}
</ul>-->
<ul>
<li *ngFor="let cars of CarTypes" >
{{cars.Name}}
</li>
<button (click)="onAddClick()">Add</button>
</ul>
<!--<select name="selectedcar" [(ngModel)]="selectedcar" ng-repeat="car as car.Name in CarTypes">{{cars}}</select>-->
</div>
Related
My object has a specific set of key / value pairs,
i want to get a specific value, not everything, how can i do this?
For example:
.ts
movie = {
title:'title',
description:'descriprtion',
rating:4
};
html:
<ul *ngFor="let item of movie | keyvalue">
<li> {{item.value}} </li>
</ul>
And I only want to receive item.description, can you tell me how this can be implemented?
<ul *ngFor="let item of movie | keyvalue">
<ng-container *ngIf="item.key === 'description'">
<li>{{item.value}}</li>
</ng-container>
</ul>
But to be honest you would be better off just doing:
<div>{{ move.description }}</div>
Since you do not seem to want to iterate the object props, but only want description.
I have a list like this
<ul>
<li *ngFor="let product of items.Products| slice 0:3 ; let i = index">
{{ product?.ProductsDescription}}
<li>
</ul>
All i want i to is, display a list of products, but i wan't to limit the exibition to only 3 products, and below, in another <li></li> display "And more {{ quantity-left-of-products }}"
Example:
I Have 6 products, so it would display:
Item 1
Item 2
Item 3
And more 3
Something like this:
In my knowledge i would have to find a way to access the index property outside the ngFor.
Can anyone help me?
You can achieve what you want without accessing the index value outside the context.
Create a variable in TS to use it as a parameter in the slice pipe.
sliceValue = 3;
loadMore() {
this.sliceValue = items.Products.length;
}
Template:
<ul>
<li *ngFor="let product of items.Products| slice 0:sliceValue ; let i = index">
{{ product?.ProductsDescription}}
<li>
<li (click)="loadMore()" *ngIf="items.Products.length > sliceValue">And more {{items.Products.length - sliceValue}}</li>
</ul>
Use *ngIf for displaying the "And More" when necessary. When the user clicks on "And More" the <li> for "And More: hides and the rest of the list loads.
I have an issue with the ngIf in Angular. So basically I want to implement a notification system to notify the user of what fields are missing.
Here is a stackblitz for the issue: https://stackblitz.com/edit/angular-behnqj
To reproduce:
1. first select the vehicle type 'plane', here everything is correct, the first error is removed and the second remains with index = 1.
2. Now refresh the stackblitz preview webpage and this time select the vehicle type 'car', we can now see that the first error is removed but the second remains with index = 2.
With some debugging I figgured out if I swap between conditions in the ngIf and do something like
<ng-container *ngIf="selectedVehicleType === 'plane'; else carsOptions">
<option *ngFor="let plane of planes; let i=index" [value]="plane" [selected]="plane === selectedVehicle" [hidden]="i===0"> {{plane}}</option>
</ng-container>
</select>
<ng-template #carsOptions>
<option *ngFor="let car of cars; let i=index" [value]="car" [selected]="car === selectedVehicle" [hidden]="i===0" > {{car}}</option>
</ng-template>
This will result to the same issue but this time with the issue occuring when we select 'plane' and not 'car'.
change it to this it will work :)
<div class="content">
<span>errors:</span>
<ul style="list-style: none;">
<li *ngFor="let error of errors; let i=index;"> {{(i+1)+ ". "+error}}</li>
</ul>
</div>
hope it helps.
I have the following html code that belongs to a template in AngularJS framework:
<ul class="sb-parentlist">
<h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index">
<li>
<span class="sb-text-title" href="#" ng-click="openFaq = ! openFaq"><b>{{data[$index].faq.frage |translate}}</b></span>
<span ng-show="openFaq" class="sb-text">
<br>
{{data[$index].faq.antwort |translate}}
</span>
</li>
</div>
</ul>
I am getting the number of "li" elements on my browser correctly on printing the results, but the variables are not defined as they should be, blank entries appearing.
here is the JSON entry:
{
"faq":
{"frage":"HB_START_FAQ_Q",
"antwort":"HB_START_FAQ_A"}
,
"screencast":"HB_START_SCREENCAST"
},
{
"faq":
{"frage":"HB_START_FAQ_Q_1",
"antwort":"HB_START_FAQ_A_1"}
,
"screencast":"HB_START_SCREENCAST_1"
},
{
"faq":
{"frage":"HB_START_FAQ_Q_2",
"antwort":"HB_START_FAQ_A_2"}
,
"screencast":"HB_START_SCREENCAST_2"
},
{
"faq":
{"frage":"HB_START_FAQ_Q_3",
"antwort":"HB_START_FAQ_A_3"}
,
"screencast":"HB_START_SCREENCAST_3"
}
I am interested to get the nested item. Any ideas?
Because data is ambiguous between the collection name and the item being iterated over - change your ngRepeat syntax:
data-ng-repeat="item in data track by $index"
And use item[$index]. Im not entirely sure why you aren't just doing data.faq - you need to select by the $index
I can access my desired field from a JSON object like so:
<li ng-repeat='customer in customers[0][data]["DisplayName"] | filter:search'>{{ customer }}</li>
However, that only returns one object's property.
Using AngularJS, is there a way to loop through the following?
customers[0][data]["DisplayName"]
customers[1][data]["DisplayName"]
customers[2][data]["DisplayName"]
customers[3][data]["DisplayName"]
customers[4][data]["DisplayName"]
...
customers is an array, so by doing ng-repeat you will already loop through it. But I think what you want is either: 1) show the DisplayName property inside <li> or 2) filter by DisplayName.
To show the nested property, do the following
<li ng-repeat="customer in customers">
{{ customer[data]["DisplayName"] }}
</li>
To filter on nested property, for example on DisplayName:
<li ng-repeat="customer in customers | filter:{data: {DisplayName: search}}">
...
</li>