角度定义要在嵌套HTML元素中重复使用的变量

Question

我是angular的新手，我一直在阅读文档，但我找不到合适的方法来声明某种可以在嵌套的html元素中重用的变量。

作为一项工作，我做了一些有效的事情，但我觉得有点脏。我想知道一个合适的解决方案会是什么样子。

基本上，我所拥有的是标识符"someProperty"，我想在嵌套HTML元素的许多地方使用它。我可能想将它用作formControlName，但也可以用作函数调用的参数。现在我滥用*ngFor来定义变量"x"。

<div class="container-row" *ngFor="let x of ['someProperty']">
<span *ngIf="isReadOnly(x)" class="readonly-indicator"></span>
<span *ngIf="!isReadOnly(x)" class="writable-indicator"></span>
<mat-form-field>
<input matInput type="number" formControlName="{{x}}"
[readonly]="isReadOnly(x)"
(change)="onChange($event, x)"
placeholder="This is some Property!">
<mat-error *ngIf="!someFormGroup.controls[x].valid">ERROR!</mat-error>
</mat-form-field>
</div>

Answer 1

我认为您需要的是具有表单控件的FormArray，并且您可以将其值作为数组在这里看到这篇文章，它将帮助你

这是另一个

如果这是你需要的，请批准这作为答案

Answer 2

您可以在组件中添加一个readonly变量，并将该属性用作常量。

readonly MY_PROPERTY = 'someProperty'

并在你的模板中使用它，就像这个

<div class="container-row" *ngFor="let x of [MY_PROPERTY]">

我希望这能有所帮助。

更新：

<div class="container-row" *ngFor="let x of ([MY_PROPERTY] as templateVariable)">
{{ formGroup.controls[templateVariable].value  }} 
</div>