ngModel变化时select没有值怎么解决？

Question

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

组件注入服务并使用服务字段过滤器。组件 hmtl 中有一个 select。 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。但是有两个问题：

初始化组件时，select 中没有值，但 filter.sizes.width 中的值为 0。我可以查看 Comment_01
当方法 clearFilter() 更改时 filter.sizes.width select 中再次没有值。

如何解决？

Answer 1

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

ngModel变化时select没有值怎么解决？

How to solve no value in select when ngModel changes?

javascript

binding

select

typescript

angular