Angular CLI: 11.1.4
Node: 12.18.3
OS: darwin x64
.ts file
ngOnInit() {
this.productService.getProductImages().subscribe(image => {
this.productImagesArray.push(image);
this.productImagesArrayBackup = this.productImagesArray.shift()
});
}
ionViewDidEnter() {
console.log('images', this.productImagesArrayBackup);
}
.html file
<ion-item-group *ngFor="let img of productImagesArrayBackup">
<ion-item>
<ion-thumbnail slot="start">
<ion-img [src]="'http://royalcare.pt/appi' + img"></ion-img>
</ion-thumbnail>
</ion-item>
</ion-item-group>
console.log result
(3) ["/images/bata-em-polipropileno-.jpg", "/images/cinzeiro-de-parede.jpg", "/images/cinzeiro-de-pe.jpg"] length: 3__proto__: Array(0)
google chrome inspect element
<ion-item-group _ngcontent-mrh-c142="" role="group" class="ios item-group-ios item hydrated">
<ion-item _ngcontent-mrh-c142="" class="item ios ion-focusable hydrated">
<ion-thumbnail _ngcontent-mrh-c142="" slot="start" class="ios hydrated">
<ion-img _ngcontent-mrh-c142="" class="ios hydrated">
</ion-img></ion-thumbnail>
</ion-item>
</ion-item-group>
Why *ngFor does not render images in view?
Not even the <ion-img> tag has a src="" inside it.
Related
I didn't understand how to pass data from .ts page to .html page in ionic angular.
Array:
this.s1mstatus = [
{
"code" : "01",
"descr" : "Text1."
},
{
"code" : "02",
"descr" : "Text2."
},
{
"code" : "03",
"descr" : "Text3."
}
]
HTML page
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col>
<ion-item [ngClass]="roundedInput" class="roundedInput">
<ion-input type="text" placeholder="Enter M-Status Code" [(ngModel)]="s1mstatus_get" maxlength="2"></ion-input>
<ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="roundedInput">
<ion-input type="text" placeholder="Enter M-Data Code" [(ngModel)]="s1mdata_get"></ion-input>
<ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-list *ngFor="let s1ms of s1filtered">
<ion-card class="card-border">
<ion-card-header>
<ion-card-subtitle>M-STATUS: {{s1ms.code}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<p>ERROR MESSAGE:</p>
<p class="ion-black" [innerHTML]="s1ms.descr"></p>
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
FUNCTION TO CHECK IF EMPTY AND "DO SOMETHING" IF ISN'T:
mstatussend() {
if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else {
this.roundedInput = 'valid';
var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
console.log(s1filtered);
}
};
As You can see by the screenshot the console.log command works but I didn't understand how to print those values on the HTML page, maybe it's something easy but is driving me mad.
When you declare variable in your method, then this variable cannot be seen for HTML template:
var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
So you need to create a variable that can be seen for HTML template:
TypeScript:
s1filtered: any; // The variable that can be seen for HTML template
mstatussend() {
if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
this.roundedInput = 'invalid';
}
else {
this.roundedInput = 'valid';
this.s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
console.log(this.s1filtered);
}
};
HTML:
<ng-container *ngIf="s1filtered && s1filtered.length > 0">
<ion-list *ngFor="let s1ms of s1filtered">
<!-- The other code is omitted for the brevity -->
</ion-list>
<ng-container>
My list.html file this file contains the list of products I am fetching using Woocommerce API.Its all working good but I am not able to bind the variation price with each variation.Because in woocommerce each variation has its own id and price is given in that array.I am so confused how to get the price on its particular variation.
<ion-slide> <!--This slide is for fruits-->
<ion-card *ngFor="let product of products" no-padding>
<ion-item>
<ion-thumbnail item-start>
<img-loader *ngIf="product.images" src="{{product.images[1].src}}"
useImg>
</img-loader>
</ion-thumbnail>
<h4 top text-wrap>{{product.name}}</h4>
<p>Rs.{{product.price*product.quantity}}</p>
<ion-icon icon-only class="dec" name="remove-circle"
(click)="decrement(product)">
</ion-icon>
{{product.quantity}}
<ion-icon icon-only class="inc" name="add-circle"
(click)="increment(product)">
</ion-icon>
</ion-item>
<ion-item *ngFor="let attr of product.attributes">
<ion-select [(ngModel)]="qty" placeholder="QTY">
<ion-option *ngFor="let opt of attr.options" [value]="opt">
{{ opt }}
</ion-option>
</ion-select>
</ion-item>
<button color="light" class="addbtn" ion-button clear >add</button>
</ion-card>
</ion-slide>
this is my list.ts file I am using getAynsc() to get the data.
this.WooCommerce.getAsync('products?
category=34&per_page=10').then((result) => {
console.log(JSON.parse(result.toJSON().body));
this.products = JSON.parse(result.toJSON().body);
console.log(this.products);
this.productsvv.forEach(product => { product.quantity = 1; });
this.products.forEach(product => { product.quantity = 1; });
return JSON.parse(result.toJSON().body);
}, (err) => {
console.log(err)
})
home.ts
items = [];
constructor(public navCtrl: NavController) {
this.initializeItems();}
initializeItems() {
this.items = [
{
'title': 'Fiat',
"models" : [
{"model":"500L","value":1,"specs":"hatchback"},
{"model":"Linea","value":2,"specs":"sedan"}
]
}]
brand.html
<ion-list>
<ion-item>
<ion-label>Models</ion-label>
<ion-select id="secim" [(ngModel)]="values">
<ion-option *ngFor="let m of item.models" value="{{m.value}}">{{m.model}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
<div class="" *ngIf="values==1">
<h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
</div>
<div class="" *ngIf="values==2" >
<h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
</div>
It's appear like this
500L:hatchback
Linea:sedan
but I want to do like this
(if select value=1)
500L:hatchback
(if select value=2)
Linea:sedan
How could I do? Thank you
Instead of what you are doing now, why not store the selected model to a variable, of which you can then show model and specs, so for example have a variable selectedModel:
<ion-item>
<ion-label>Models</ion-label>
<ion-select id="secim" [(ngModel)]="selectedModel">
<ion-option *ngFor="let m of item.models" [value]="m">{{m.model}}</ion-option>
</ion-select>
</ion-item>
And then just have one div to show the other properties:
<div *ngIf="selectedModel">{{selectedModel.model}}:{{selectedModel.specs}}</div>
DEMO: http://plnkr.co/edit/1xwhtwB5YjKHDbRzusHP?p=preview
This page works likes the following. The user selects a product (C2, Coca Cola, etc.) then the prices from the different supermarket are supposed to be displayed. This is the object I created.
productPrices = [
{
name: "C2 Green Tea",
prices: [
{
smPrice: 19.15,
tsPrice: 19.25,
rbPrice: 19.10
}
],
stock: 50
},
{
name: "Coca Cola",
prices: [
{
smPrice: 21.50,
tsPrice: 21.45,
rbPrice: 24.50
}
],
stock: 50
},
{
name: "Nature's Spring",
prices: [
{
smPrice: 12.50,
tsPrice: 11.50,
rbPrice: 13.00
}
],
stock: 50
},
{
name: "Red Horse Beer",
prices: [
{
smPrice: 31.50,
tsPrice: 29.50,
rbPrice: 30.90
}
],
stock: 50
},
];
getProductPrice(product: string){
return this.productPrices.filter(item => item.name == product);
}
By using the getProducPrice() method, I'm able to get the product selected and its properties. But I can't get the value of the prices. What I have on the template page is this.
<div *ngFor="let itemPrice of productPrices">
<div *ngFor="let marketPrice of itemPrice.prices">
<form (ngSubmit)="onFormSubmit(userForm)" #userForm="ngForm" >
<ion-list>
<ion-list-header>
Supermarkets
</ion-list-header>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/ts.jpg">
</ion-thumbnail>
<p>{{marketPrice.tsPrice}}</p>
<button ion-button clear item-end (click)="onBuy()" >Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/sm.png">
</ion-thumbnail>
<p>{{marketPrice.smPrice}}</p>
<button ion-button clear item-end (click)="onBuy()"> Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/rb.jpg">
</ion-thumbnail>
₱<input name="price" value="{{marketPrice.rbPrice}}">
<p>{{marketPrice.rbPrice}}</p>
<button ion-button clear item-end (click)="onBuy()">Buy</button>
</ion-item>
<ion-item>
<ion-label>Enter Quantity</ion-label>
<ion-input type="number" min="0"></ion-input>
</ion-item>
</ion-list>
</form>
</div>
</div>
The problem with that is that if I use a form to submit, it'll submit all the values including the prices of the other supermarkets.
Is there a better way for me to loop from the object I received and access the prices values of each product? I'm not using a DB nor is this file saved in a json file. I just want to know if there's a better way to get values at the typescript file by using some methods. Thank you.
try this you will property of selected product
<div *ngFor="let item of productPrices">
<button (click) ="getProductPrice(item)">get</button>
</div>
In your ts file
getProductPrice(product: any){
console.log(product);
}
i´m having a problem with using ng-repeat. I´m using Ionic 2 with TypeScript and HTML5. I created an array of Objects where i need to access it´s attributes. It´s saying "cannot read property c.getAttribute of undefined" but when i tried to access these attributes not using ng-repeat (just typing array[0].getAttribute), everything worked fine.
Here is my code:
<ion-list>
<ion-item ng-repeat="c in card">
<ion-card class="styledRow">
<ion-item class="cardHeaderClass">
<font size="4" style="color:#FFFFFF;">{{c.getExpiration}}</font>
<p>Monthly student</p>
</ion-item>
<ion-item class="rangeSlider">
<p style="color:white">Perm</p>
<ion-badge color="blue" item-right>{{c.getPermValue}}/{{c.getTotalValue}}{{c.getDayEuro}}
</ion-badge>
</ion-item>
<ion-item class="rangeSlider">
<ion-range disabled="false" min="0" max="{{c.getTotalValue}}" step="1" [(ngModel)]="c.getPermValue" color="secondary">
<ion-icon range-left name="close" color="danger"></ion-icon>
<ion-icon range-right name="checkmark-circle-outline" color="secondary"></ion-icon>
</ion-range>
</ion-item>
<ion-row class="styledRow">
<ion-col>
<button ion-button icon-left color="#f4f4f4" clear small>
<ion-icon name="calendar"></ion-icon>
<div>Platnosť: {{c.getExpiration}}</div>
</button>
</ion-col>
</ion-row>
<div text-right="" class="styledRow">
<ion-note>Refreshed: 12.3.2017
</ion-note>
</div>
</ion-card>
</ion-item>
</ion-list>
And here is my typescript:
export class HomePage {
card: permCard[];
constructor(public navCtrl: NavController) {
this.card = new Array();
for (let i = 0; i < 2; i++){
this.card.push(new permCard("Name","Name", 33, 40, " "+"days", "12.2.2017"));
}
}
}
export class permCard{
private centerName: string;
private permName: string;
private permValue: number;
private totalValue: number;
private dayEuro: string;
private expiration: string;
constructor(public center_name: string, public perm_name: string, public perm_value: number, public total_value: number,
public day_euro: string, public expiration_date: string){
this.centerName = center_name;
this.permName = perm_name;
this.permValue = perm_value;
this.totalValue = total_value;
this.dayEuro = day_euro;
this.expiration = expiration_date;
}
get getCenterName(): string {
return this.centerName;
}
get getPermValue(): number {
return this.permValue;
}
get getPermName(): string {
return this.permName;
}
get getTotalValue(): number {
return this.totalValue;
}
get getDayEuro(): string {
return this.dayEuro;
}
get getExpiration(): string {
return this.expiration;
}
}
I don´t know, if the problem is in the array, but only the array.push worked for me for initialization of array. Please, do you have any idea, what should be the problem. TypeScript and angular is new for me, thanks.
how-to-access-object-in-array-using-ng-repeat
You cant. ng-repeat is angularjs (version 1) syntax.
Ionic 2 is built on top of angular 2.
The format for for loop in template is:
<ion-item *ngFor="let c of card">
<ion-card class="styledRow">
<!-- shortened for brevity -->
</ion-item>
Documentation ngFor