Angular 2: How to set value on multiple select in template?

Question

I want to set value(set 0) of select by button click event. This event will help me clear all the count.

I have tried to use [(ngModel)] to fix it, but it'll sync all value... I don't want to sync all the select value. It need to independent each select.

This is my first Question. If it has any mistake, please let me know! thank you!

[Template]

<div class="container">
  <div id="gallery row clearfix">
    <h2>volvo</h2>
    <div *ngFor="let item of carInfo" class="gallery-item">
      <span *ngFor="let favs of item.favorite" class="glyphicon glyphicon-thumbs-up" style="color:blue"></span>
      <h3 class="carModel" #model>{{item.model}}</h3>
      <img src={{item.src}}/>
      <h3 class="carPrice" #price>{{item.price}}</h3>
      <p>count:</p>
      <select class="form-control" #t (change)="addToCart(model.innerText,t.value)">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
</div>

<button type="button" (click)="checkOut()" class="btn btn-primary btn-lg btn-block">Express checkout</button>
<button type="button" (click)="clear()" class="btn btn-default btn-lg btn-block">Clear</button>

Answer 1

Add value to your 0.

<select class="form-control" #t >
                    <option value="0">0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>

Your button

<button type="button" (click)="t.value=0" class="btn btn-default btn-lg btn-block">Clear</button>

example

<video #movieplayer ...>
  <button (click)="movieplayer.play()">
</video>