typescript - ค่าเริ่มต้นของ select ใน Angular 6 ไม่ถูกเลือกใน Reactive Form

ฉันมีแบบฟอร์มซึ่งแสดงด้านล่าง และมีเมนูแบบเลื่อนลงสำหรับโซนโดยมีค่าพื้นฐานคือ "ALL" และค่าที่เหลือถูกดึงมาจากการเรียกใช้งาน API

 <form method="POST" for enctype="multipart/form-data" [formGroup]="unitSearchForm">
            <div class="form-group">
              <label for="Zone">Zone</label>
              <select class="form-control" id="zone" formControlName="zoneId">
                <option [ngValue]="0">All</option>
                <option [ngValue]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}</option>
              </select>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" id="search" formControlName="unitName"
                placeholder="Search by Unit Name" />
            </div>
            <div class="form-group">
              <select class="form-control" formControlName="status">
                <option [ngValue]="status.Code" *ngFor="let status of _statusArr">{{status.Name}}</option>
              </select>
            </div>
            <div class="align-self-end form-group">
              <button type="submit" class="btn  btn-primary" (click)="SearchUnits()"><i
                  class="fa fa-fw fa-search"></i>Search</button>
            </div>
          </form>

/*
Component Code
*/

      ngOnInit() {
        this.InitilizeSearchForm();
        this.InitilizeSelectors();
      }


      private InitilizeSearchForm() {
        this.unitSearchForm = this._fb.group({
          zoneId: ['0'],
          unitName:['',Validators.maxLength(100)],
          status:['A']
        });
      }

      private InitilizeSelectors(){
        let searchCriteria: IDictionary = {}
        this._statusArr=this._dataservice.GetStatus();
        this._zones = this._adminService.Getzones(searchCriteria);
        searchCriteria["status"] =  this.unitSaveForm.get('status').value;
      }

ฉันจะเลือก "ทั้งหมด" ในเมนูแบบเลื่อนของโซนได้อย่างไร? ฉันพยายามตั้งค่าตอนที่กำลังสร้างฟอร์ม แต่ก็ไม่ได้ผล ค่าที่ถูกเลือกเริ่มต้นจะเป็นค่าว่างตลอด

คำตอบ #1

คุณสามารถใช้การผูก [value] สำหรับตัวเลือกและการผูก [selected] สำหรับตัวเลือก ทั้งหมด:

<div class="form-group">
  <label for="Zone">Zone</label>
  <select class="form-control" id="zone" formControlName="zoneId">
    <option value="All" [selected]="'All'">All</option>
    <option [value]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}
    </option>
  </select>
</div>

ตรวจสอบ stackblitz