在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