angular - Angular中数据模型的结构引用。不一样的逻辑

Question

在我的 Angular 项目中，我的模型需要 3 个功能：

a）模型与大层次结构中的其他模型有关系，我想通过读取模型内部的变量来访问数据关系。示例：模型 A 与模型 B 有关系，模型 B 与模型 C 有关系，模型 C 与模型 D 有关系，......我的目标是能够像这样读取关系数据：

<div *ngFor="let elementA of modelA_list">
    <div *ngFor="let elementB of elementA.modelB_list">
        <div *ngFor="let elementC of elementB.modelC_list">
            {{elementC.something}}
        </div>
    </div>
</div>

b) 模型之间的关系有时是双向的。例如：模型 A 与模型 B 有关系，模型 B 与模型 A 有关系。这会产生导入导致的循环依赖错误。

c）我想要每个模型类型都有一个具有相同 id 的唯一对象。这是因为如果元素发生更改，我希望更新应用程序中显示有关此元素的信息的其他位置的信息。例如：

// first fragment
<div *ngFor="let elementA of modelA_list">
    <div *ngFor="let elementB of elementA.modelB_list">     
        <input [(ngModel)]="elementB.name"></div>   
    </div>
</div>

// second fragment
<div *ngFor="let elementC of modelC_list">
    <div *ngFor="let elementB of elementC.modelB_list">     
        {{elementB.name}}       
    </div>
</div>

在此代码中 {{elementB.name}} 显示在应用程序的两个部分中，如果 elementB 的名称在第一个片段的输入中发生更改，我希望此信息在第二个片段中更新。

想到这里，我有了一个想法。这个想法是建立一个基于接口模型的系统。该模型具有类型为空的变量，这些变量any[]将根据关系数据存储对其他模型对象的引用。这种结构不会导致循环依赖错误。为了让每个模型类型都有一个具有相同 id 的唯一元素，有一个服务可以存储应用程序中每个模型类型的模型类型的所有唯一元素。最后，核心服务可以返回一个模型类型的对象列表以及与内部其他模型的关系，实时构建。

如果您看到图表，在“组件 1”中，您可以获得模型类型 modelA 的元素（引用）列表以及与 modelB 和 modelC 的关系数据，如下所示：

+--模型A[0]
   |
   +--id: 1
   |
   +--名称：示例 1a
   |
   +--models_b：
   | |
   | +--型号B[0]
   | | |
   | | +--id: 1
   | | |
   | | +--名称：示例 1b
   | |
   | +--型号B[1]
   | |
   | +--id: 2
   | |
   | +--名称：示例 2b
   | |
   | +--models_c
   | |
   | +--型号C[0]
   | |
   | +--id: 1
   | |
   | +--名称：示例 1c
   |   
   +--models_c：
      |
      +--型号C[0]
         |
         +--id: 1
         |
         +--名称：示例 1c

我已经编写了一个代码来测试这个系统：Codesandbox Link

在这一点上，我的问题是：

1）¿这个系统管理模型是否正确？

2) ¿ 已经存在类似于这个系统的东西？

3）如果这个系统不正确¿我可以做哪些其他逻辑来解决这个问题？

对不起我的英语，感谢您的帮助和时间。

标签： angularmodel