3

在我的 Angular 项目中，我有一个select-box组件，它从我的数据模型中获取数据。选项基本上来自服务，所选值来自当前打开的数据模型。

我想在选择标签附近实现一个添加按钮。如果用户单击此按钮，他将获得一个模式窗口，其中包含模型的表单，该表单显示在选择中。如果用户在此处添加模型的新实例，则数据将保存到存储中，并且选择将使用此新实例进行更新。

我使用带有许多选择字段的复杂表单 - 带有许多加号按钮，打开许多创建组件。

我想避免在用户单击给定的加号按钮之前渲染这些组件。

这是我的父组件的 TypeScript 代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // this coming from a data service
  langs = [
    {id: 1, name: 'english'},
    {id: 2, name: 'deutsch'},
    {id: 3, name: 'latin'},
  ];

  // coming from a data service
  model = {
    id: 100,
    name: 'John Doe',
    lang_id: 3,
  }
}

这是我现在如何使用我的选择组件的示例：

<app-select-box [items]="langs" [selectedValue]="model.lang_id">
  <app-lang-create-edit></app-lang-create-edit>
</app-select-box>

这是我的选择框组件的 HTML 代码：

<div class="input-group">
  <select class="form-control">
      <ng-container *ngFor="let item of items">
        <option [value]="item[value]">{{ item.names[0][text] }}</option>
      </ng-container>
  </select>
  <div class="input-group-append" *ngIf="!buttonHide">
    <button class="btn btn-light" tabindex="-1" (click)="showModal(modal)"> + </button>
  </div>
</div>

<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" *ngIf="isModalOpen">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title">Add new element</h5>
      <button type="button" class="close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
          <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

我认为问题出在ng-content标签的使用上，因为它在渲染的同时渲染传入的代码<div class="modal" ...>。

这是带有更详细代码的工作示例。

我可以避免以某种方式呈现app-lang-create-edit组件，直到模态不可见？

如果用户关闭并重新打开模式对话框，我想每次都重新渲染。

有什么解决办法吗？

4

0 回答 0