![](/img/trans.png)
[英]How should I achieve dynamic generate Form::date() in laravel 8
[英]How should I achieve dynamic routing in angular
在這里,我與大家分享我的代碼。
1. all-trades.component.ts
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 我的代碼應該導航到另一個組件頁面並顯示名稱來自我的對象數組的子類別名稱。 同樣,它也適用於“WHEAT”和“BARLEY” 示例:當我點擊 Wheat Card 時,它應該導航到不同的頁面並顯示 Wheat 部分的 subCategory 的名稱。
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,
},
],
}
]
將您的對象數組添加到共享文件夾中(如果沒有創建一個名稱為 shared 的目錄)
將Crop.ts
創建到共享文件夾中
import {subcategory} from './subcategory';
export class Crop{
checked:boolean
name: string;
comments: Subcategory[];
}
創建subcategory.ts
到共享文件夾
export class subcategory{
id:string,
name:string,
isActive:boolean
}
將cropdata.ts
創建到共享文件夾中
import {Crop} from './crop';
export const CROP: Crop[] = [
{
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,
},
],
}
]
[routerLink]="['/Cropdetail', crop.name]"
{path:'Cropdetail/:name',component:CropdetailComponent},
在 Cropdetail.ts(cropdetail 組件)中
ngOnInit(): void {
let name = this.route.snapshot.params['name'];
this.crop= this.cropservice.getCrop(name);
}
生成服務cropservice
import {CROP} from '../shared/cropdata';
CropData:CROP
getCrop(name: string): CROP{
return CropData.filter((crop) => (crop.name === name))[0];
}
最后在訪問cropdetail.html {{Crop.subCategory}}
子類別
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.