ngModel更改时如何解决select中没有值？

Posted 2023-02-23

【中文标题】ngModel更改时如何解决select中没有值？

【英文标题】：How to solve no value in select when ngModel changes?

【发布时间】：2021-05-25 00:19:06

【问题描述】：

一个项目包含一个组件和一个服务。

组件注入服务并使用服务字段过滤器。组件hmtl中有一个选择。 select的[(ngModel)]绑定到filter.sizes.width。

组件：

@Component(
  selector: 'app-facet-sizes-static',
  templateUrl: './facet-sizes-static.component.html',
  styleUrls: ['./facet-sizes-static.component.scss']
)
export class FacetSizesStaticComponent implements OnInit 
  constructor(
    private Search: SearchService
  ) 
    this.filter = Search.filter;
  

  clearFilter() 
    this.filter.sizes.width = 0;
  

它的模板：

<div (click)="clearFilter()"></div>


<!-- Comment_01 -->
filter.sizes.width

<div *ngIf="filter.sizes">
    <select name="width"
            [(ngModel)]="filter.sizes.width">
        <option [ngValue]="null">~</option>
        <option *ngFor="let item of facet.sizes[0].parts.width; let x = index" 
                [ngValue]=item>
             item  
        </option>
    </select>
</div>

服务：

export class SearchService 

  filter: SearchServiceFilter = null;

  constructor() 
  this.filter = 
      sizes: 
        width: 0
      ,
    ;
  

当我在 select 中更改选项时，它会更改 filter.sizes.width，因为我 exapt。但是有两个问题：

当组件被初始化时，选择中没有值，但 filter.sizes.width 的值为 0。我可以查看 Comment_01 下的字符串 filter.sizes.width 来检查它 当 clearFilter() 方法更改 filter.sizes.width 时，选择中再次变为无值。

我该如何解决？

【参考方案1】：

听起来您的 facet.sizes[0].parts.width 数组不包含值 === 0。我看到您的选项值为 null，但 null 不等于 0，因此不会被选中。如果您添加一个值为 === 0 的选项；它应该选择它。