【问题标题】:mat-select mat-option angular drop down doesn't change value after you select other value from dropdown从下拉列表中选择其他值后,mat-select mat-option 角度下拉列表不会更改值
【发布时间】:2021-05-18 21:55:04
【问题描述】:

我使用的是Angular材质表,mat-select和mat-option下拉,对于Media下拉,值为Email,lk_type为3287,我选择电话后,媒体值应该是phone,lk_type应该是3286 ,但是,当我单击编辑按钮时,this.currentData 没有更改下拉值,它仍然保持旧值,你知道我可以如何更改我的下拉值这个角垫选择和垫选项下拉?

add-person.component.html

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="person_contact_ID">
    <mat-header-cell *matHeaderCellDef> Person Contact ID </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
        <input [(ngModel)]="row.currentData.person_contact_ID" placeholder="Person Contact ID" [disabled]="!row.editing" matInput>
      </mat-form-field>
    </mat-cell>
  </ng-container>
<ng-container matColumnDef="media">
    <mat-header-cell *matHeaderCellDef> Media </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field>
        <mat-select style="min-width: 200px;" placeholder="" value="{{row.currentData.lk_type}}">
          <mat-option *ngFor="let media of mediaList " value="{{media.lookup_id}}">
            {{ media.descr }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  

<ng-container matColumnDef="actionsColumn">
    <mat-cell *matCellDef="let row">
      <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate_AddPerson()">
        <i class="fa fa-check mat-icon"></i>
      </button>
    </mat-cell>
  </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumn
s"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

tabledata.ts

confirmEditCreate_AddPerson(): boolean {
    //_personService: TestRDB2Service;
    if (this.id == -1)
      return this.source.confirmCreate(this);
    else
      
      try {
        this._http.put("https://localhost:5001/" + 'api/TestRDB2/AddUpdatePerson_Contact/', this.currentData).subscribe();        
      } catch (e) {
        return e
      }
    return true;
      //return this.source.confirmEdit(this);
  }

【问题讨论】:

    标签: angular dropdown mat-table


    【解决方案1】:

    如果您在 mat-table 中使用 mat-select,则需要使用双向绑定 ngModel 以便在 currentData 对象中设置数据,请查看以下代码以供参考:

    <mat-form-field>
            <mat-select style="min-width: 200px;" placeholder="" [(ngModel)]="row.currentData.lk_type">
              <mat-option *ngFor="let media of mediaList " value="{{media.lookup_id}}">
                {{ media.descr }}
              </mat-option>
            </mat-select>
          </mat-form-field>
    

    【讨论】:

    • 您好,感谢您的建议,它可以更改选择值,但是,当它第一次加载时,它不会从下拉列表中显示选择的值,我附上另一张照片并突出显示,您可以看到它.. 我怎样才能像以前一样显示选定的值下拉列表?
    • 嗨 Shariq,感谢您的信息,我更改了 [(value)],现在可以使用了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-08
    • 1970-01-01
    相关资源
    最近更新 更多