Question

如何创建带有2个对象“ title”和“ link”的数组，然后使用for循环？对于每个（li a href）？我正在使用角形

<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>

Answer 1

这里是例子

working Examlple

Component.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

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"}
         ];

Answer 2

如果我对您的理解正确，那么您想在您的网站中创建“过滤器”，这是我的答案：

简短的回答：在“ angular”中使用“ click”方法，并在其中调用您的方法

如果这不是您想要的，抱歉，但这可能会对其他人有所帮助

**代码示例可进一步说明：**

//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>

谢谢

如何在“ li tag href”中使用for循环

2 个答案: