Question

我认为这是一个小错误，但我无法找到它。

我有这样的表格：

<mat-card>
   <form #f="ngForm">

      <mat-card-content>

        <mat-form-field>
         <mat-select [ngModel]="data.variable" name="variable">
          <ng-container *ngFor="let variable of list;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
          </ng-container>
         </mat-select>
        </mat-form-field>

      </mat-card-content>

      <mat-card-actions>

         <button [disabled]="!f.valid" (click) = "addItem(f.value)">
         </button>

      </mat-card-actions>     

   </form>
</mat-card>

list将id作为带空格的字符串，例如“VAR VARIABLE1”

这是我的问题，当我点击按钮时，变量的值只是“VAR”而不是“VAR VARIABLE1”，为什么不是完整的id？

Answer 1

尝试使用：

<mat-form-field>
    <mat-select [(value)]="data.variable" name="variable">
        <ng-container *ngFor="let variable of foods;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

OR

<mat-form-field>
    <mat-select [(ngModel)]="data.variable" name="variable">
        <ng-container *ngFor="let variable of foods;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

绑定模板中的值。

value="{{ variable.id }}"

OR

[value]="variable.id"

选择的值使用ngModel而不是value。

<mat-select [(value)]="data.variable">

应该是

<mat-select [(ngModel)]="data.variable">

mat-select值与空格不起作用

1 个答案: