在 ngIf 中获取 mat-panel 的值？

Question

在对内容进行一些更改之前，我正在尝试使用 Angular 的 ngIf 检查我的 mat-panel 框的标题。

<mat-expansion-panel-header id="head">
      <mat-panel-title>
        Demo1
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>
<mat-expansion-panel hideToggle>
                <mat-expansion-panel-header id="head">
                  <mat-panel-title>
                    Demo
                  </mat-panel-title>
                  <img class="panel-image" src="assets/demo.png">
                </mat-expansion-panel-header>
                <div class="holder">
                  <mat-card id="CARDBOX" *ngFor="let box of box">
                      <img class="logoy" src="{{box.image}}" alt="Tesla" height=35px>
                      <a href="{{box.link}}" class="button">{{box.button_name}}</a>
                      <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
                  </mat-card>
</mat-expansion-panel>

<mat-expansion-panel-header id="head">
      <mat-panel-title>
        Demo2
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>
<mat-expansion-panel hideToggle>
                <mat-expansion-panel-header id="head">
                  <mat-panel-title>
                    Demo
                  </mat-panel-title>
                  <img class="panel-image" src="assets/demo.png">
                </mat-expansion-panel-header>
                <div class="holder">
                  <mat-card id="CARDBOX" *ngFor="let box of box2">
                      <img class="logoy" src="{{box.image}}" alt="Tesla" height=35px>
                      <a href="{{box.link}}" class="button">{{box.button_name}}</a>
                      <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
                  </mat-card>
</mat-expansion-panel>

由于我希望由 ngFor 生成标题，有没有一种方法可以在生成面板的正文内容之前使用 ngIf 检查哪个标题？喜欢

<ngIf title===Demo>
    <mat-card **apply this**/>

我想这样做是因为我想使用 ngFor 生成标题和内容。可以用相同的方式生成标头，但是内容非常不同，因此需要检查将其放置在哪个标头下。这可以使用 ngIf 吗？

我想我正在尝试做的就像 python 或 java 中的 if 语句。如果标题是一回事，我想要它，然后用一些东西填充内容。如果标题是其他内容，则使用其他内容填充内容。这有意义吗？

Answer 1

代码应该是这样的......

<mat-expansion-panel-header id="head" *ngIf="title === 'Demo'">
      <mat-panel-title>
        Demo1
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>

<mat-expansion-panel-header id="head" *ngIf="title === 'Demo2'">
      <mat-panel-title>
        Demo2
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>

Answer 2

我在这里使用一个 div 作为示例：但是你可以使用一个函数来只获取你真正想要在 DOM 中创建的对象：

<div *ngFor="let item of getItems()">
  <h3>{{item.title}}</h3>
      {{item.value}}
</div>

还有 TS：

export class AppComponent  {
  items = [
    {title: "Demo", value: "Should Show"},
    {title: "Demo 2", value: "Should NOT Show"},
  ]

  getItems() : any[] {
    return this.items.filter(f => f.title == "Demo");
  }

  name = 'Angular ' + VERSION.major;
}

这可以让您过滤项目。

编辑

经过澄清，您想要做的是在这种情况下更改显示的“标题”。

那是不是 ngIf 的用途； NgIf 有一个目的：当表达式的计算结果为 true 以在 DOM 中呈现元素。

对于您想要做的事情，您可以使用标准表达式。下面是一个使用三元运算符的示例：

<div *ngFor="let item of items">
  <h3>{{item.title == "Demo" ? item.title : "Alter-name"}}</h3>
      {{item.value}}
</div>

如果你不熟悉三元运算符：

if (item.title == "Demo) { 
  showValue(item.Title);
}
else {
  showValue("Alternate Value");
}

这实际上与

具有相同的含义

item.title == "Demo" ? item.title : "Alter-name"