根据对象的现有变体类型从表中选择输入数据答案

【问题标题】：select input data from table based on the existing variant type of object根据对象的现有变体类型从表中选择输入数据
【发布时间】：2021-07-26 05:40:45
【问题描述】：

在我的项目中，我在一个表中发现了一个问题，我可以在该表中选择intervention 的类型。有些干预措施是独特的，有些干预措施有变体。 The problem arises when the selection of the variant (for example) c, the intervention with the variant of type a is always obtained. 从一开始我就有一个class 这种类型的：

export class Intervention {
    id: number
    code: string
    description: string
}
---------------------------------------------
import { Intervention } from "./intervention"

export class AssociationIntervention {
    id: number
    intervention: Intervention
    price: number
    variant: string
    variants?: string[] //used for contain all variants

Intervention 中的当前数据示例如下：

CREATE TABLE `intervention` (
  `id` bigint(20) NOT NULL,
  `code` varchar(255) DEFAULT NULL,
  `description` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `intervention` (`id`, `code`, `description`) VALUES
(1, 'A', 'good'),
(2, 'B', 'ok'),
(3, 'C', 'no');

AssociationIntervention 中的当前数据示例如下：

CREATE TABLE `association_intervention` (
  `id` bigint(20) NOT NULL,
  `intervention_id` bigint(20) DEFAULT NULL,
  `price` double NOT NULL,
  `variant` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `association_intervention` (`id`, `intervention_id`, `price`, `variant` ) VALUES
(1, 1, 22.16, NULL),
(2, 2, 18.17, 'a'),
(3, 2, 32.15, 'b'),
(4, 3, 10.29, NULL);

ALTER TABLE `association_intervention`
  ADD CONSTRAINT `FKc9gs2ok9kwfp1b7l1r0lvaapu` FOREIGN KEY (`intervention_id`) REFERENCES `intervention` (`id`),

我页面上的表格如下所示：

<table class="table">
      <thead>
        <tr>
          <th scope="colgroup">Code</th>
          <th scope="colgroup">Price</th>
          <th scope="colgroup">Select</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let type of interventionVar; index as i">
          <tr *ngFor="let variant of type.variants; index as j">
            <td>{{type.intervention.code}} - {{type.variants[j]}}</td>
            <td>{{type.price[j]}}</td>
            
            <td>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="form-check-input" (click)="press(type, j)">
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>

ts中的方法是这样的：

interventionVar: AssociationIntervention[]
selectedElement: AssociationIntervention[] = []

press(selected: AssociationIntervention[], variant: number) {
    const newInterv = Object.assign({}, selected)
    this.selectedElement.push(newInterv)
    console.log(this.selectedElement[0])
}

问题是即使有了上面的数据我去选择干预B - b，我总是会选择干预B - a。我该如何解决？

【问题讨论】：

接口AssociationIntervention和InterventionAssociation一样吗？
@OwenKelvin 书写错误。我立即编辑。只有 AssociationIntervention
如果您可以分享更好的确切接口代码，只需将接口复制并粘贴到您的问题中即可。还分享你在哪里分配属性值
@OwenKelvin 我用准确的接口和数据库数据编辑帖子
您已致电selectedElement.push()。请确认selectedElement的类型？是selectedElement: AssociationIntervention还是selectedElement: AssociationIntervention[]

标签： javascript html arrays angular typescript

【解决方案1】：

首先尝试查找所有变体列表。并找到与之关联的每个变体的相应干预。以下代码可帮助您找到它。

stackblicks solution

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  interventionVar: AssociationIntervention[] = interventionVar;
  selectedElement: AssociationIntervention[] = [];
  allVariant = {};
  selectedValues;
  ngOnInit() {
    this.allVariant = this.getAllVariants();
  }

  getAllVariants() {
    let items = {};
    associationIntervention.some(x => { 
      x.variants.some(y => { 
        if(y && items[y]) {
            items[y].push(x.intervention_code);
        }else if(y){
          items[y] = [];
          items[y].push(x.intervention_code);
        }
      });
    });
    return items;
  }

  keys() : Array<string> {
    return Object.keys(this.allVariant);
  }

  press( variant: string) {
    this.selectedValues = this.allVariant[variant];
  }
}

stackblicks solution

【讨论】：