我如何创建一个带有布尔值和特定 ID 的按钮？

Question

我目前正在编写一个组件来显示文档，例如 qt doc (https://doc.qt.io/qt-5/qstring.html)，我正在使用 CodeMirror 来显示代码示例。

我正在使用 Angular 2:

<div *ngFor="let method of methods" style="background-color: inherit; margin: left">
      <div class="content" style="position: relative;">

        <p class="title" style="font-size: 150%; text-decoration: underline" id="{{method.id}}">
          {{ method?.name }}
        </p>
        <br/>
        <p class="description" *ngIf="method"  [innerHtml]="method.description | textToHtml"></p>
        <div class="markdown" markdownMethodDocumentationRenderer [text]="method.documentation"></div>
        <button class="button" *ngIf="!showCode" (click)="showCloseExample()">Show example</button>
        <button class="button" *ngIf="showCode" (click)="showCloseExample()">Close example</button>
        <div *ngIf="showCode">
          <app-code-mirror [data]="method.documentation"></app-code-mirror>
        </div>
        <br/>
        <hr>
        <br/>
      </div>
    </div>

我创建了一个按钮来显示或隐藏内部有 CodeMirror 组件的 div，但是当我单击此按钮时，它会打开每个示例。我认为这是因为它在 ngFor 上。当我点击这个按钮时，我只想打开一个 div 而不是全部

Answer 1

您将不得不使用 showCode 标志数组或将标志添加到方法变量。现在你正在使用单个标志 showCode 到 show/hide *ngFor.

中的每个元素

Answer 2

您的代码存在问题，您正在更改一个变量 showCode。您还关注了 showCode 变量，以及 opening/closing 您的每个代码片段在它发生变化时。

这个问题有很多解决方案，其中之一如下：

在 methods 数组的每个对象中添加一个新布尔值。让我们像您一样将其命名为 showCode。现在每个方法都有一个 showCode 标志。而不是 ngIf="showCode"，您将有 ngIf="method.showCode".

现在，您可以 (click)="method.showCode = !method.showCode" 而不是 (click)="showCloseExample()"。（我相信这是 Angular 中的正确语法，如果不是，将其绑定到一个函数并传递方法的索引，然后更新方法的 showCode 标志）

我如何创建一个带有布尔值和特定 ID 的按钮？

How can i create a button with boolean and a specific id?

angular

ngfor

codemirror