在Angular HTML中动态包含数组对象变量

Question

我是Angular 6的新手。这是我的问题。

在组件中：

 ngOnInit() {

                this.cols = [
                    { field: 'col1', header: 'Column 1', filterMatchMode: 'contains' },
                    { field: 'col2', header: 'Column 2', filterMatchMode: 'contains' },
                     ...
                ];
this.selectedColumns = this.cols;

    }

在HTML中：

 <p-table [columns]="selectedColumns" >
    <th *ngFor="let col of columns;">
                  <div [ngClass]="{'has-error': col.field.invalid && col.field.touched }">
                    <input [(ngModel)]="newRecord[col.field]" name="{{col.field}}" #{{col.field}}="ngModel" required type="text" pInputText [style]="{'width':'100%'}" class="form-control form-control-sm search-input" pattern="[0-9]+" />
                  </div>
                  <div *ngIf="col.field.invalid && col.field.touched" class="td-error-msg">
                    Valid input is required.
                  </div>
                </th>
 </p-table>

我在尝试检查动态值“ col.field”并将其插入ngIf和Angular ID时遇到问题。

1. *ngIf="col.field.invalid && col.field.touched"
2. name="{{col.field}}" #{{col.field}}="ngModel"

我正在尝试通过错误消息为输入字段提供验证。

Answer 1

您正在滥用主要的p表组件，试图将列标题用作输入形式。 如果要使用该表输入新数据，则只需创建一个具有单个行的<p-table>并使用诸如OnEditComplete()的内置功能（例如OnEditComplete()事件）来触发验证就OnEditComplete() 。 我还会问自己，您是否真的需要动态列？ 您需要使用桌子吗？ 您能制作一张表格，然后使用验证版本进行初始化吗？

https://www.primefaces.org/primeng/#/table/edit

https://www.primefaces.org/primeng/#/validation

Answer 2

您可以创建一个具有静态名称的模板变量，例如#field （或您喜欢的任何名称），并且由于它的作用域是该项，因此不会有命名冲突。

<input [(ngModel)]="newRecord[col.field]" name="{{col.field}}" #field="ngModel"... /> ... <div *ngIf="field.invalid && field.touched" class="td-error-msg"> Valid input is required. </div>

field将始终引用当前项目的输入。 *ngFor结构化指令为每个项目创建一个模板，每个模板都有自己的范围。 这应该是动态创建模板变量名称的最简单解决方案。

https://stackblitz.com/edit/angular-mefkxp?file=src%2Fapp%2Fapp.component.html