Javascript 我应该如何在angular中实现动态布线

这里还有实际输出

我想创建一个动态路由，从对象数组中获取数据

在这里，您可以看到我想从子类别中获取数据，并以卡片的形式在不同的页面上显示名称

我在这里和你们分享我的代码

1。所有交易.组件.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。Alltrades.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>

选择作物


{{crop.name}


选择地区


{{district.name}}


{{crop.name}
100公斤
价格

在这里，你们可以看到我的网页上有几张名为“RICE”、“WHEAT”、“BARLY”的卡片，我只想点击RICE，我的代码就会导航到另一个组件页面，并显示我的对象数组中的子类别名称。类似地，它也适用于“小麦”和“大麦”，例如：当我点击小麦卡片时，它应该导航到不同的页面并显示小麦部分的子类别的名称

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

crops=[
{
名称：'Rice'，将对象数组添加到共享文件夹中（如果不是，则创建一个名为shared的目录）

在共享文件夹中创建
Crop.ts

import {subcategory} from './subcategory';
export class Crop{
    checked:boolean
    name: string;
    comments: Subcategory[];
}

export class subcategory{
id:string,
name:string,
isActive:boolean
}

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

创造
subcategory.ts
进入共享文件夹

import {subcategory} from './subcategory';
export class Crop{
    checked:boolean
    name: string;
    comments: Subcategory[];
}

export class subcategory{
id:string,
name:string,
isActive:boolean
}

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

创造
cropdata.ts
进入共享文件夹

import {subcategory} from './subcategory';
export class Crop{
    checked:boolean
    name: string;
    comments: Subcategory[];
}

export class subcategory{
id:string,
name:string,
isActive:boolean
}

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

和Cropdetail.ts（Cropdetail组件）

genrate服务
cropservice

import {CROP} from '../shared/cropdata';

CropData:CROP
getCrop(name: string): CROP{
    return CropData.filter((crop) => (crop.name === name))[0];
}

最后在访问cropdetail.html中的子类别
{{Crop.subCategory}}