我想通过从对象数组中选取选择性元素来制作动态路由 --- TYPESCRIPT

Question

1.全部-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。全部-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 部分子类别的名称。

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,
        },
      ],
    }
  ]

Answer 1

您可以使用 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 //用点击事件替换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 //将选定的crop和route发送到同一个组件

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>

我想通过从对象数组中选取选择性元素来制作动态路由 --- TYPESCRIPT

I want to make a Dynamic Routing by picking up the SELECTIVE ELEMENTS FROM ARRAY OF OBJECTS --- TYPESCRIPT

javascript

angular

typescript

angular2-routing

dynamic-routing