标签: ngmodel

这个例子中的 ngModel 正在杀死我的浏览器。有什么想法如何获取每个表格单元格模型？（我尝试使用（更改），并且它有效 - 但更改了所选值）

<tr *ngFor="let step of procSteps; let i = index;  let first = first; let last = 
                                      last; let even = even; let odd = odd;">

                <td> <p>{{step.position}}</p> </td>

                <td> <p>{{step.name}}</p> </td>

                <td>
                    <select [(ngModel)]="selectedSystemStep[i]">
                        <option *ngFor="let system of systemModuleList" 
                                [value]="system.id">{{system.name}}</option>
                    </select>
                </td> 
</tr>

我知道FormGroup组件类中的实例可以链接到响应式表单中模板中的表单以验证其输入字段。但是我不明白我们如何FormGroup在模板驱动的表单中使用。ngModel和 和有FormGroup什么区别？

我使用 mat-select 在 angular 7 项目和 angular material 中选择用户的性别

 <mat-form-field>
          <mat-select placeholder="Gender" required 
            formControlName="isMale" 
            [(ngModel)]="userProfile.isMale">
            <mat-option value="false">Women</mat-option>
            <mat-option value="true">Men</mat-option>
          </mat-select>
          <mat-hint align="end">Please Select...</mat-hint>
          <mat-error *ngIf="isControlHasError('isMale','required')"><strong>Please Select Gender</strong>
          </mat-error>
        </mat-form-field>

userProfile 从服务器获取，isMale 属性是布尔类型，但获取数据后在 mat-select 上不显示所选值我也使用这种方式但不起作用

        <mat-option [value]="'false'">Women</mat-option>
        <mat-option [value]="'true'">Men</mat-option>

但它不起作用

我已经建立了这个表格：

这是html代码：

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

这是相关的打字稿代码：

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', …

所以我有以下组件:

export class ModuleComponentComponent implements OnInit {
    dropzoneConf;
    fileService = environment.getFileUrl;

    constructor(
        private moduleComponentService: ModuleComponentService) {
    }

    @Input()
    selectedComponent: ModuleComponent;

    ngOnInit() {
        this.setDropZoneConfig();
    }    
}

在那我有以下的HTML:

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" />
</h3>

以及我在html中添加组件的方式:

<div class="col-lg-8 col-x1-12" *ngIf="selectedComponent != null">
   <app-module-component [selectedComponent]="selectedComponent"></app-module-component>
</div>

当我在输入字段中输入内容时,它不会更新selectedComponent.title变量

谁能告诉我发生了什么事？