1. all-trades.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-all-trades',
templateUrl: './all-trades.component.html',
styleUrls: ['./all-trades.component.css'],
})
export class AllTradesComponent implements OnInit {
// This is my Array of Object
crops = [
{
name: 'Rice',
checked: true,
subCategory: [
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
onChange(event, index, item) {
item.checked = !item.checked;
console.log(index, event, item);
}
constructor(private route: ActivatedRoute) { }
ngOnInit(): void { }
}
2. all-trades.component.html
<app-header></app-header>
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutAlign="space-between start"
fxLayoutAlign.lt-md="start stretch"
>
<div class="container-outer" fxFlex="20">
<div class="filters">
<section class="example-section">
<span class="example-list-section">
<h1>Select Crop</h1>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let crop of crops">
<mat-checkbox
[checked]="crop.checked"
(change)="onChange($event, i, crop)"
>
{{ crop.name }}
</mat-checkbox>
</li>
</ul>
</span>
</section>
<section class="example-section">
<span class="example-list-section">
<h1>Select District</h1>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let district of districts">
<mat-checkbox>
{{ district.name }}
</mat-checkbox>
</li>
</ul>
</span>
</section>
</div>
</div>
<div class="content container-outer" fxFlex="80">
<mat-card
class="crop-card"
style="min-width: 17%"
*ngFor="let crop of crops"
[hidden]="!crop.checked"
>
<!-- I tried the logic here to navigate to sub-Category Array by its id.
But I failed -->
<a
[routerLink]="['/all-trades', crop.id]"
routerLinkActive="router-link-active"
>
<mat-card-header>
<img
mat-card-avatar
class="example-header-image"
src="/assets/icons/crops/{{ crop.name }}.PNG"
alt="crop-image"
/>
<mat-card-title>{{ crop.name }}</mat-card-title>
<mat-card-subtitle>100 Kgs</mat-card-subtitle>
</mat-card-header>
</a>
<mat-card-content>
<p>PRICE</p>
</mat-card-content>
</mat-card>
</div>
</div>
<app-footer></app-footer>
你们在这里可以在我的网页上看到几张名为“ RICE”,“ WHEAT”,“ BARLY”的卡,我只想通过单击RICE来完成,我的代码应导航到另一个组件页面并显示名称我的对象数组中的subCategory名称。同样,它也应适用于“ WHEAT”和“ BARLEY”。例如:当我单击Wheat Card时,它应导航到其他页面并显示Wheat部分的子类别名称。
crops = [
{
name: 'Rice', <---- 1. Go here
checked: true,
subCategory: [ <-- 2. Go to subCategory and fetch the name of the "RICE" on different Page
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
您可以使用BehaviorSubject进行相同的操作
app-routing.component.ts //定义路径
const routes: Routes = [
//other routes
{ path:'crop/:name', component:CropComponent}
]
crop.ts //为裁剪界面建模
export class crop{
name: string;
checked: boolean;
subCategory:Subcategory[];
}
export class Subcategory{
id: number;
name: string;
isActive: boolean;
}
service.ts //创建主题并定义getter和setter方法
export class CropService {
private selectedCrop= new BehaviorSubject<Crop>(null);
setCrop(crop:Crop){
this.selectedCrop.next(crop);
}
getCrop(){
return this.selectedCrop.asObservable().pipe(skipWhile(val=> val === null));
}
}
all-trades.component.html //用click事件替换routerLink
<mat-card
class="crop-card"
style="min-width: 17%"
*ngFor="let crop of crops"
[hidden]="!crop.checked"
>
<a
(click)="onSelect(crop)"
routerLinkActive="router-link-active"
>
<mat-card-header>
<img
mat-card-avatar
class="example-header-image"
src="/assets/icons/crops/{{ crop.name }}.PNG"
alt="crop-image"
/>
<mat-card-title>{{ crop.name }}</mat-card-title>
<mat-card-subtitle>100 Kgs</mat-card-subtitle>
</mat-card-header>
</a>
<mat-card-content>
<p>PRICE</p>
</mat-card-content>
</mat-card>
all-trades.component.ts //发出选定的作物并路由到相同的组件
constructor(private service: Cropservice, private router:Router){}
onSelect(selectedCrop:Crop){
this.service.setCrop(selectedCrop);
this.router.navigateByUrl(`crop/${crop.name}`);
}
crop.component.ts //订阅主题并在本地存储作物数据
crop: Crop
export class CropComponent implements OnInit{
ngOnInit(){
this.service.getCrop().subscribe((selectedCrop:Crop)=>this.crop =
selectedCrop)
}
}
crop.component.html
<div *ngFor="let category of crop.subCategory">{{category.id}}</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句