Javascript 当ngModel发生变化时，如何解决select中无值问题？

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

组件注入服务并使用服务字段筛选器。组件hmtl中有一个select。select的[（ngModel）]绑定到filter.size.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>

当我在“选择”中更改选项时，它会在我检查时更改filter.size.width。但有两个问题：

初始化组件时，选择中没有值，但filter.sizes.width的值为0。我可以通过观察注释_01下的字符串{{filter.size.width}来检查它

当方法clearFilter（）更改filter.sizes.width时，select中的值再次变为no

---

如何解决它？

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

export class SearchService {

  filter: SearchServiceFilter = null;

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

}