如何在 ng-container 中定义变量？

Question

在基于 Angular 12 的 Web 应用程序的另一个组件中，我已经使用ng-containerwith*ngFor来迭代数组并显示数组中每个项目的控件，如下所示：

<ng-container *ngFor="let parameter of parameters">
    ....
</ng-container>

现在我需要做几乎相同的事情，但不需要迭代任何东西。我只是想要一个定义了变量的容器，然后我可以在容器内使用该变量。我已经尝试使用*ngVar代替，*ngFor但后来出现此错误：

无法绑定到“ngVar”，因为它不是“ng-container”的已知属性。

我怎样才能像我已经对单个变量所做的那样做同样的事情*ngFor而不迭代任何东西？我不想使用 a，div因为我不希望容器元素在渲染后实际存在于我的应用程序的 HTML 中。我认为有一个简单的解决方案，但到目前为止我还没有找到它。

以下是我想如何使用此功能：

<ng-container
  *ngFor="let parameterColumn of parameterColumns"
  matColumnDef="{{ parameterColumn }}"
>
  <th mat-header-cell *matHeaderCellDef>
    {{ parameterColumn }}
  </th>
  <td mat-cell *matCellDef="let element">
    <ng-container variable="parameter = getParameterById(element, parameterColumn)">
      ...
    </ng-container>
  </td>
</ng-container>

Answer 1

我不确定你到底想要什么，但是ng-template有你需要的变量功能，你可以将它与它一起使用ng-container而不插入任何额外的html，请参考下面的模式，其中使用上下文插入变量。

更新：OP 提供了输入，因此代码被修改，以便变量被硬编码ng-container如下

在下面的示例中，变量是硬编码的，您可以将其插入组件中的任何位置并重用硬编码的变量。

<ng-container *ngTemplateOutlet="template; context: { variableToBeUsed: 'variable to be used' }"></ng-container>
<ng-template #template let-test="variableToBeUsed">
  <h1>variable to be used: {{ test }}</h1>
</ng-template>

控制器

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
}

堆栈闪电战