使用点击事件Angular 8一次打开一个键值

Question

我有一个对象，我正在尝试设置（最终）编辑该对象中每个键值的能力，方法是打开一个带有切换的表单并通过一个小表单编辑该属性。

我尝试过使用密钥管道，但每个 k:v 的数据结构不同，因为不同的表有很多相关的东西。我应用了这个，认为我可以索引 k:v 并因此根据它的索引打开每个。也许我应该更多地研究这个？

首先，我需要让切换开关(*ngIf"=show_form" | openForm()) 工作，就像目前我单击一个按钮来显示 k:v 一样，所有按钮都会打开，因为条件设置为全线为真。

这是 HTML 的简化视图：

<li>App Body Font Family:</li>
<ul>
    <li>{{ config.body_font.data.font_family }}<li>
    <li><button (click)="openForm('body)">{{ button_text }}</button>
    <ng-container *ngIf="show_form">
        <li *ngIf="fonts">
        <span *ngFor="let font of fonts">
        {{ font.font_family }}//form will live here eventually as a select dropdown
        </span>
        </li>
    </ng-container>
</ul>
<li>App Headings Font Family:</li>
<ul>
    <li>{{ config.header_font.data.font_family }}<li>
    <li><button (click)="openForm('header')">{{ button_text }}</button>
    <ng-container *ngIf="show_form">
        <li *ngIf="fonts">
        <span *ngFor="let font of fonts">
        {{ font.font_family }}//form will live here eventually as a select dropdown
        </span>
        </li>
    </ng-container>
</ul>

component.ts

public show_form: any = {
    body: false,
    header: false
}

public openForm(key: any) {
    this.show_form[key] = !this.show_form[key]
}

如您所见，单击按钮时show_form 将设置为 true，因此当前两个部分都打开和关闭，而不仅仅是我单击的那个。

我正在遭受一点开发倦怠的折磨，所以对于一个更清晰的头脑来说，问题可能非常明显。谁能指出我正确的方向？

Answer 1

将show_form 存储为所有标题的对象（或任何其他唯一的对象）

打字稿：

public show_form: any= {
    title:false,
    title2:false
};

public openForm(title:any) {
   this.show_form[title] = !this.show_form[title]
   ...
}

模板：

<li><button (click)="openForm('title')">{{ button_text }}</button>

<li><button (click)="openForm('title2')">{{ button_text }}</button>

<ng-container *ngIf="show_form['title']">
  ...
</ng-container>


<ng-container *ngIf="show_form['title2']">
  ...
</ng-container>