[英]How to use for loop in "li tag href"
How can I create an array with 2 objects "title" and "link" then using for loop??如何创建一个包含 2 个对象“标题”和“链接”的数组,然后使用 for 循环? for each (li a href) ??
对于每个 (li a href) ?? I'm using angular
我正在使用角度
<div class="text-footer">
<ul>
<li>
<a href="#abc">facebook</a>
</li>
<li>
<a href="#abc">twitter</a>
</li>
<li>
<a href="#abc">instagram</a>
</li>
</ul>
</div>
Here is the Example这是示例
Component.html
组件.html
<ul>
<li *ngFor = "let title of fetchData">
<a href="title.title">{{title.title}} -- {{title.description}} -- {{title.tagline}} {{title.date}}</a></li>
</ul>
component.ts
组件.ts
mydata = [
{"title":"http://tombatossals.github.io/angular-leaflet-directive/#!/","description":"dd","tagline":"tt","date":"derd"},
{"title":"http://tombatossals.github.io/angular-leaflet-directive/#!/","description":"fdfds","tagline":"tt","date":"rerrdd"},
{"title":"http://tombatossals.github.io/angular-leaflet-directive/#!/","description":"dsfsdf","tagline":"tt","date":"derred"},
{"title":"http://tombatossals.github.io/angular-leaflet-directive/#!/","description":"dsfd","tagline":"tt","date":"rrere"}
];
If i understand you correctly, you want to make "Filters" in your website, here is my answer for this :如果我理解正确,您想在您的网站中制作“过滤器”,这是我的答案:
Short Answer : use 'click' method in angular and inside it call your method简短回答:在 angular 中使用“click”方法,并在其中调用您的方法
If this is not what you want, sorry but it may help others如果这不是你想要的,对不起,但它可能会帮助别人
**Code example for more clarification : ** **更多说明的代码示例:**
//The Shop.Component :
import { Component, OnInit } from '@angular/core';
import { IProduct } from '../shared/models/product';
import { ShopService } from './shop.service';
import { IBrand } from '../shared/models/brand';
import { IType } from '../shared/models/ProductType';
@Component({
selector: 'app-shop',
templateUrl: './shop.component.html',
styleUrls: ['./shop.component.scss'],
})
export class ShopComponent implements OnInit {
products: IProduct[];
brands: IBrand[];
types: IType[];
brandIdSelected = 0;
typeIdSelected = 0;
constructor(private shopService: ShopService) {}
ngOnInit(): void {
this.getProducts();
this.getTypes();
this.getBrands();
}
getProducts() {
this.shopService.getProducts(this.brandIdSelected, this.typeIdSelected).subscribe(
(response) => {
this.products = response.data;
},
(error) => {
console.log(error);
});
}
getBrands() {
this.shopService.getBrands().subscribe(
(response) => {
this.brands = [{id: 0, name: 'All'}, ...response];
},
(error) => {
console.log(error);
});
}
getTypes() {
this.shopService.getTypes().subscribe(
(response) => {
this.types = [{id: 0, name: 'All'}, ...response];
},
(error) => {
console.log(error);
});
}
onBrandSelected(brandId: number) {
this.brandIdSelected = brandId;
this.getProducts();
}
onTypeSelected(typeId: number) {
this.typeIdSelected = typeId;
this.getProducts();
}
}
//Shop.Service :
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { IPagination } from '../shared/models/pagination';
import { IBrand } from '../shared/models/brand';
import { IType } from '../shared/models/ProductType';
@Injectable({
providedIn: 'root'
})
export class ShopService {
baseUrl = 'https://localhost:5001/api/';
constructor(private http: HttpClient) { }
getProducts(brandId?: number, typeId?: number) {
let params = new HttpParams();
if (brandId) {
params = params.append('brandId', brandId.toString());
}
if (typeId) {
params = params.append('typeId', typeId.toString());
}
return this.http.get<IPagination>(this.baseUrl + 'products', {observe: 'response', params})
.pipe(
map(response => {
return response.body;
})
);
}
getBrands() {
return this.http.get<IBrand[]>(this.baseUrl + 'products/brands');
}
getTypes() {
return this.http.get<IType[]>(this.baseUrl + 'products/types');
}
}
//shop -> html:
<div class="container">
<div class="row">
<section class="col-3">
<h5 class="text-warning ml-3 my-3">Sort</h5>
<select class="custom-select mb-3">
<option>Alphabetical</option>
<option>Price : Low to High</option>
<option>Price : High to Low</option>
</select>
<h5 class="text-warning ml-3 my-3">Brands</h5>
<ul class="list-group my-3">
<li class="list-group-item"
*ngFor="let brand of brands"
[class.active]="brand.id === this.brandIdSelected"
[value]="brand.id"
(click)="onBrandSelected(brand.id)"
>
{{brand.name}}
</li>
</ul>
<h5 class="text-warning ml-3 my-3">Types</h5>
<ul class="list-group">
<li class="list-group-item"
*ngFor="let type of types"
[class.active]="type.id === this.typeIdSelected"
[value]="type.id"
(click)="onTypeSelected(type.id)"
>
{{type.name}}
</li>
</ul>
</section>
<section class="col-9">
<div class="d-flex justify-content-between align-items-center pb-2">
<header>
<span>Showing <strong>10</strong> of <strong>16</strong> Results </span>
</header>
<div class="form-inline mt-2">
<input class="form-control my-2 mt-2" style="width: 300px" placeholder="Search"
type="text">
<button class="btn btn-outline-primary ml-2 my-2">Search</button>
<button class="btn btn-outline-success ml-2 my-2">Reset</button>
</div>
</div>
<div class="row">
<div class="col-4 mb-2" *ngFor="let item of products">
<app-product-item [product]="item"></app-product-item>
</div>
</div>
</section>
</div>
Thanks谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.