仅显示特定内容的隐藏div

Question

我已经创建了这个演示组件DemoComponent，并且需要在此处编辑ngFor循环所生成的内容。我创建了一个隐藏的div，如果用户单击内容，该隐藏的div将被触发，然后用户将能够以当隐藏的模板变得可见时显示的形式对其进行编辑。

但是这里的问题是我希望打开隐藏的div来代替被单击的特定内容，而不是像现在在应用程序中那样立即显示所有内容。我只想为单个内容而不是其他内容打开一个div。用户可能会在此页面中发送许多内容部分，因为这是动态的，我正在尝试使其在运行时可编辑。我能够隐藏和显示隐藏模板代替内容，并且隐藏模板显示确实包含其内容的相应数据，但是我只希望为将被单击的内容而不是全部显示一个模板。如果您可以编辑我的代码，那就太好了，或者只是让我了解如何只显示一个模板显示相应的内容，而并非所有模板都可以通过单击打开所有模板的相应内容。

这是一张演示图片，可以帮助您更好地了解我正在尝试做的事情。

Answer 1

这是您指定的项目的有效演示。

您需要更改HTML的第9行和第25行

第9行

<div *ngIf="i !== showTemplate" (click)="Template(i)">

第25行

<div *ngIf="i === showTemplate" class="panel panel-default">

然后在您的component.ts中

Template(index: string) {
    this.showTemplate = index;
    this.firstTemplate = true;
    this.hide = true;
  }

这...

showTemplate: string;