angular - 如何在 HTML 表格中实现依赖的 <select>

Question

我已经实现了一张如下所示的表格。两列是可编辑的，我们可以在其中从下拉列表中选择值。我使用 HTML 选择实现了这一点。 “Category tier 2”中的值取决于我在“Category tier 1”列中选择的值。
当我在特定行的“Category tier 1”列中选择一个值时，“Category tier 2”列中的所有行值都会更改，但我只想更改该特定行的“Category tier 2”值.

stackblitz link .

Answer 1

您可以将表中的每一行创建为组件，例如 my-row.component 并将其用作 tr 上的属性。在这些变化之后

app.component.html

<div>
  <table style="width:100%">
        <th *ngFor = "let column of headers">
            {{column}}
        </th>
        <th>
            Category tier 1
        </th>
        <th>
            Category tier 2
        </th>
        <ng-container *ngFor = "let row of rows">
        <tr [headers]="headers" [row]="row" [categories]="categories" [category_tier1]="category_tier1" app-my-row></tr>   
        </ng-container>
    </table>
</div>

app.component.ts

import { Component, VERSION } from '@angular/core';
interface Category{
    category_id: number;
    tier1: string;
    tier2: string;
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  categories:Category[]=[
    {
    "category_id": 2,
    "tier1": "ABC",
    "tier2": "A"
    },
    {
    "category_id": 3,
    "tier1": "ABC",
    "tier2": "B"
    },
    {
    "category_id": 4,
    "tier1": "ABC",
    "tier2": "C"
    },
    {
    "category_id": 5,
    "tier1": "DE",
    "tier2": "D"
    },
    {
    "category_id": 6,
    "tier1": "DE",
    "tier2": "E"
    },
    {
    "category_id": 7,
    "tier1": "FG",
    "tier2": "F"
    },
    {
    "category_id": 8,
    "tier1": "FG",
    "tier2": "G"
    }
    ];
      category_tier1:string[]=[];
      category_tier2:string[]=[];

      headers=["Firstname","Lastname","Age"];

      rows=[
        {
          "Firstname":"Jill",
          "Lastname":"Smith",
          "Age":"50"
        },
        {
          "Firstname":"Eve",
          "Lastname":"Jackson",
          "Age":"94"
        },
        {
          "Firstname":"John",
          "Lastname":"Doe",
          "Age":"80"
        }
  ];

  constructor(){
    for(let i in this.categories){
                this.category_tier1.push(this.categories[i].tier1);
              }
              this.category_tier1=Array.from(new Set(this.category_tier1));
  }

}

app.component.css

table, th {
    border: 1px solid black;
    border-collapse: collapse;
    table-layout: fixed; width: 100%
  }
  th {
    padding: 15px;
    overflow: hidden;
  }

我的行.component.html

<td *ngFor="let column of headers">
    {{row[column]}}
</td>
<td>
    <select (change)="selectTier1($event)">
                  <option *ngFor="let c of category_tier1" [value]="c">{{c}}</option>
                </select>
</td>
<td>
    <select (change)="selectTier2($event)">
                <option *ngFor="let c of category_tier2" [value]="c">{{c}}</option>
              </select>
</td>

my-row.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[app-my-row]',
  templateUrl: './my-row.component.html',
  styleUrls: ['./my-row.component.css']
})
export class MyRowComponent implements OnInit {
  @Input() public headers;
  @Input() public row;
  @Input() public categories;
  @Input() public category_tier1;
  public category_tier2;
  constructor() { }

  ngOnInit() {
  }
  selectTier1(event){
    this.category_tier2=[];
    for(let c in this.categories){
      if(this.categories[c].tier1===event.target.value){
        this.category_tier2.push(this.categories[c].tier2);
      }
    }
  }
  selectTier2(event){

  }
}

my-row.component.css

 td {
    padding: 5px;
    overflow: hidden;
  }

select {
    border: 0;
    height: 60%;
    width: 100%;
}

td {
    border: 1px solid black;
    border-collapse: collapse;
    table-layout: fixed; width: 100%
  }

通过使用上述方法，每一行都将获得它们各自的第 2 层阵列。

工作堆栈 Blitz :- https://stackblitz.com/edit/angular-ivy-dcjc1y