If I have this array :
array = [
{
img: [
{0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
{1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
],
}
{
img: [
{0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
{1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
],
}
]
How do I display it in HTML ? I know how to display one img if it was img : 'url' it would look like this ;
this.imgs = this.myprovider.getArray();
HTML :
<div ngfor="let item of imgs">{{item.img}}</div>
Since your key in the array of img objects is a number starting at 0, you can just use the loop index to access the value:
<ul>
<li *ngFor="let item of array">
<ul>
<li *ngFor="let image of item.img; let i = index">
<img src="{{ image[i] }}" />
</li>
</ul>
</li>
</ul>
Stack Blitz doesn't want to load the image URLs for some reason, but as you can see from the output, the HTML is correct: https://stackblitz.com/edit/nested-array-example
Try
<div ngfor="let item of imgs">{{item.img.toString()}}</div>
or
<div ngfor="let item of imgs">
<div ngfor="let img of item.img">{{img}}</div>
</div>
You can iterate twice in nested manner -
<ng-container ngfor="let childImages of imgs">
<div ngfor="let item of childImages">{{item.img}}</div>
<ng-container>
Note : You should use instead of any other html element otherwise it will distort html look & feel.
<div *ngFor="let item of imgs">
<div *ngFor="let img of item.img; let i=index;">{{img[i]}}</div>
</div>
Related
I have a two arrays. An array that is a set of images and an array that is a set of data.
Is there a way to check the checkbox when the IDItem in the two arrays are the same?
DEMO
.html
<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of items; let j = index;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="product.image" class="mdc-image-list__image">
</div>
<div class="mdc-image-list--with-text-protection">
<div class="mdc-image-list__supporting mdc-image-list__supporting">
<span class="mdc-image-list__label">{{product.name}}</span>
</div>
<div class="Info">
<dx-check-box (onValueChanged)="change($event);" [value]="false"></dx-check-box>
</div>
</div>
</li>
</ng-container>
</ul>
.TS
items=[
{
ID:1,
IDItem:1,
image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",
name:"name1"
},
{
ID:2,
IDItem:2,
image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",
name:"name2"
},
{
ID:3,
IDItem:3,
image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",
name:"name3"
},
]
data=[ {
ID:1,
IDItem:1,
},
{
ID:2,
IDItem:2,
},]
change(e){
console.log(e)
}
In this case, IDItem 1 and 2 are present in the items and data arrays. Is there a way for these items to mark the checkbox as checked?
You could achieve this by making a function to check if the current product.IDItem is present in any of the objects in the data array, and if it is, set the value property of your checkbox to true.
TS (ES2016+)
isProductInData( productId ) {
const dataIds = this.data.map( i => i.IDItem );
return dataIds.includes( productId );
}
TS (Pre-ES2016)
isProductInData( productId ) {
const dataIds = this.data.map( i => i.IDItem );
return dataIds.indexOf( productId ) !== -1;
}
This will return true if the productId you pass in exists as a IDItem in any object in the this.data array
HTML
<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of items; let j = index;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="product.image" class="mdc-image-list__image">
</div>
<div class="mdc-image-list--with-text-protection">
<div class="mdc-image-list__supporting mdc-image-list__supporting">
<span class="mdc-image-list__label">{{product.name}}</span>
</div>
<div class="Info">
<dx-check-box (onValueChanged)="change($event);"
[value]="isProductInData( product.IDItem )">
</dx-check-box>
</div>
</div>
</li>
</ng-container>
</ul>
I was trying to find the way in the docs, but I couldn't. In Vue JS, I have this data structure:
recipes: [
{
name: string,
ingredients: [array],
link: string
}
]
I can make a v-for and get my app to show the name, the link and the ingredients. However, I cannot find the way to loop through the ingredients array and make it show like a list.
This is how it looks like now:
And I want it to be like:
tomatoes
bread
garlic
So, basically I need to know how to ask for an iteration of items in an array within an object.
This is my component's code:
<!-- This creates a card per recipe -->
<template >
<div v-if="cardView" class="recipes container section">
<div class="row">
<div v-for="recipe in recipes" class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<h1 class="card-title">{{recipe.name}}</h1>
<h2>Ingredients</h2>
<ul>
<li v-for="(recipe,index) in recipes" :key="index">{{recipe.ingredients}}</li>
</ul>
<ul>
<li v-for="recipe in recipes">{{recipe.meals}}</li>
</ul>
</div>
<div class="card-action">
Full Recipe
Add to Week Menu
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { db } from "#/firebase/config";
export default {
name: "RecipesCards",
data() {
return {
recipes: []
};
},
methods: {},
created() {
db.collection("Recipes")
.get()
.then(snapshot => {
snapshot.forEach(doc => {
let recipe = doc.data();
recipe.id = doc.id;
this.recipes.push(recipe);
console.log(this.recipes);
});
});
},
props: ["cardView"]
};
</script>
If I've understood correctly then you want to change this:
<li v-for="(recipe,index) in recipes" :key="index">{{recipe.ingredients}}</li>
to this:
<li v-for="(ingredient, index) in recipe.ingredients" :key="index">{{ ingredient }}</li>
Here recipe is defined by the surrounding v-for on the div, which you already have.
Makes sense, cause you're itterating over the same array and returning ingredients values, and value of each object is an array.
Since your list is inside recipes loop, you may iterate over the array of each object of that array, so your v-for of a list should look like this
<li v-for="(ingredient, index) in recipe.ingredients" :key="index">
{{ingredient}}</li>
Another approach - make component for each card and return ingredients as an array through computed properties.
Im not quite sure something like this is possible but say in my html component I have an ngFor like so..
<div *ngFor="let card of cards">
... stuff in here
</div>
now say I have an array of classNames like so
classNames = [
'red',
'yellow',
'blue',
'green'
]
and inside my *ngFor I have a div like so
<div *ngFor="let card of cards">
<div [class]='...'>
<div class="card">
</div>
</div>
</div>
basically what I want to happen is for every item in the ngFor give loop through the classNames array and dynamically add it to the incoming data so for example
say I have 6 items in cards so each card needs a classname so it loops through classNames and gives it a class so like this..
<div [class]='red'>
<div class="card">
</div>
</div>
<div [class]='yellow'>
<div class="card">
</div>
</div>
<div [class]='blue'>
<div class="card">
</div>
</div>
<div [class]='green'>
<div class="card">
</div>
</div>
<div [class]='red'>
<div class="card">
</div>
</div>
<div [class]='yellow'>
<div class="card">
</div>
</div>
and so on and so forth..
how could i accomplish something like this?
EDIT
component.html
<div class="card" *ngFor="let card of cards; let i = index">
<div [class]="classNames[i%classNames.length]">
....
</div>
</div>
component.ts
export class...
classNames = [
'light-green',
'dark-green',
'aqua',
'blue',
'blue-purple',
'purple',
'purple-pink',
'purple-orange'
];
You can leverage remainder (%) operator to achieve that:
<div *ngFor="let card of cards; let i = index">
<div [class]="classNames[i%classNames.length]">
<div class="card">
{{ card }}
</div>
</div>
</div>
Ng-run Example
Update:
You should define array as follows:
classNames = [
'light-green',
'dark-green',
'aqua',
'blue',
'blue-purple',
'purple',
'purple-pink',
'purple-orange'
];
Note: i use = instead of :
Instead of randomly applying any class to any card or deciding it on view based on some %, the best way, I believe would be read it from the Cards object itself, since it is logical to have all details of a card read from the card itself.
So that view is independent of those extra stuffs.
classNames = ['red','yellow','blue','green'];
cards = [{text: 1, class: this.classNames[0]},{text: 2, class: this.classNames[1]}];
your view should simply do its task (render)
<div *ngFor="let card of cards; let i = index">
<div [class]="card.class">
<div class="card">
{{ card.text}}
</div>
</div>
</div>
I have a dynamic images coming from a json and doing *ngFor to loop through the objs and putting it in a carousel using bootstrap carousel, but I want to put a readmore link within the *ngFor so each item will have a read more.
I can't figure out how to do when a user click "readmore" it will scroll to its relative item showing about the image if that makes sense.
<div class="col-sm-4" *ngFor="let journey of Journey">
<div class="journey_block">
<div class="icon-workflow">
<div class="view view-fourth">
<img src="{{ journey.imageName }}" alt="">
<div class="mask">
Read More
</div>
</div>
<h4 class="journey_title">
<a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
{{journey.title}}
</a>
</h4>
</div>
</div>
My attempt is I thought I would then need to do for loop, I have 5 items in total in the json data.
getImg() {
this.http.get('./journey.json')
.map((res:Response) => res.json())
.subscribe(data => {
if(data) {
var jsonObj = JSON.parse(JSON.stringify(data));
this.Journey = jsonObj.journey;
for (var i = 0; i < this.Journey.length; i++) {
var element = this.Journey[i];
this.objCount = element;
console.log(this.objCount);
}
}
});
};
View full html structure of the carousel
Carousel structure
You need to have the index inside of the loop for making the data-slide-to attribute unique. This could be done by the predefined Angular2 value index.
Example
<!-- Angular 2.0 -->
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>
In your code:
<div class="col-sm-4" *ngFor="let journey of Journey; let i = index">
<div class="journey_block">
<div class="icon-workflow">
<div class="view view-fourth">
<img src="{{ journey.imageName }}" alt="">
<div class="mask">
Read More
</div>
</div>
<h4 class="journey_title">
<a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
{{journey.title}}
</a>
</h4>
</div>
</div>
I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/
Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>
The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview
Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});