1

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 我的代码导航到另一个组件页面并显示名称我的对象数组中的子类别名称。同样，它也适用于“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,
        },
      ],
    }
  ]
4

1 回答 1

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 //将选中的裁剪和路由发送到同一个组件

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

作物.component.html

<div *ngFor="let category of crop.subCategory">{{category.id}}</div>
于 2020-11-13T04:21:10.173 回答