Angular中如何避免select默认选中数组首个元素及绑定失效问题

使用ngFor遍历senders数组，需求是展示对象的name字段，选中选项时将id传递至组件。但页面重载时，select会默认选中senders数组的首个元素；尝试设置option disabled、提交后重置select值均无效，还发现组件与select的双向绑定未成功。

<ng-container *ngIf="providers.provider_id != ''; else noItems">
    <ng-container *ngIf=" providers$ | async; let _provider">
        <form (ngSubmit)=onSubmit()>
            <div class="currency">
                <label for="send">Select {{providers.send_currency}} account</label>
                <select name="send" id="send-field" class="select-field" [(ngModel)]="senderId">
                    <option value="" disabled>Select sender {{providers.send_currency}} account</option>
                    <option *ngFor="let sender of senders" [value]="sender.id">{{ sender.name }}</option>
                </select>
            </div>
            <div class="currency">
                <label for="receive">Select {{providers.receive_currency}} account</label>
                <select name="receive" id="receive-field" class="select-field" [(ngModel)]="receiverId">
                    <option value="" disabled>Select receiver {{providers.receive_currency}} account</option>
                    <option *ngFor="let receiver of receivers" [value]="receiver.id">{{ receiver.name }}</option>
                </select>
            </div>
            <div class="name">
                <input type="text" id="amount-field" placeholder="Amount" [(ngModel)]="amount" name="amount">
            </div>
            <div class="purchase">
                <button type="submit" style="padding: 10px 10px;">Make purchase</button>
            </div>
        </form>
    </ng-container>
</ng-container>

@Component({
  selector: 'app-purchase',
  templateUrl: './purchase.component.html',
  styleUrls: ['./purchase.component.css']
})
export class PurchaseComponent {

  public providers: providers = {provider_id:"", provider_name:"", send_currency:"", receive_currency:"", sell_rate:0}
  providers$: Observable<providers> | undefined;
  accounts$: Observable<Account[]> | undefined;

  senders: Account[] = [{id:"",user_id:"", name:"", currency:""}]
  receivers: Account[] = [{id:"",user_id:"", name:"", currency:""}]
  senderDetail: Account = {user_id:"", name:"", currency:"", id:""}
  receiverDetail: Account = {user_id:"", name:"", currency:"", id:""}
  senderId: string = "";
  receiverId: string = "";
  amount: string = ""
  displayModal = false

  constructor(
    private purchaseStore: PurchaseStoreService,
    private accountStore: AccountStoreService,
    private transferService: TransferRemoteService,
    private messageService: MessageService,
    @Inject(ACCOUNT_SERVICE_TOKEN) private accountService: AccountsRemoteService,
  ) { 
  }

  ngOnInit() {
    const userId = localStorage.getItem("user_id")!
    this.accountService.getAccountsForUserID(userId).subscribe({
      next: res => {
        this.accountStore.setAccount(res.data!)
      },
      error: err => console.log(err)
    })
    this.providers$ = this.purchaseStore.getProvidersAsObservable();
    this.providers = this.purchaseStore.getProviders()  
    this.accountStore.getAccount().subscribe({
      next: (account) => {
        this.senders = account.filter(element => element.currency == this.providers.send_currency)
        this.receivers = account.filter(element => element.currency == this.providers.receive_currency)
        this.senderId = "";
        this.receiverId = "";
      },
      error: err => console.log(err)
    })
  }

  onSubmit(){
    const transferRequestBody = {
      sender_account_id: this.senderId,
      receiver_account_id: this.receiverId,
      amount: Number(this.amount)*100,
      rate: this.providers.sell_rate*100,
      provider_name: this.providers.provider_name
    } as transfer;
    
    this.transferService.makeTransfer(transferRequestBody).subscribe({
      next: res => {
        console.log(res.data)
        this.displayModal = !this.displayModal;
        this.messageService.add({
          severity: 'success',
          summary: 'Success',
          detail: 'Purchase made successfully!',
        });
      },
      error: err => {
        this.displayModal = !this.displayModal;
        this.messageService.add({
          severity: 'error',
          summary: 'Error',
          detail: 'Purchase failed!',
        });
        console.log(err)
      }
    })
    
    this.senderDetail.name = ""
    this.receiverDetail.name = ""
    this.amount = ""
    this.senderId = ""
    this.receiverId = ""
  }
}

• 双向绑定类型匹配：将senderId和receiverId的初始值设为空字符串""，而非undefined，与select空选项的value=""类型一致，确保ngModel能正确绑定。
• 避免自动选中首个元素：在senders和receivers数组更新后，手动重置senderId和receiverId为空，防止数组变化后Angular自动匹配选中第一个有效选项。
• 修正HTML属性错误：移除select、input标签中name、id属性的多余空格，保证属性值合法；删除默认选项的selected="true"，避免与ngModel的双向绑定逻辑冲突。
• 修复错误提示类型：提交失败时的消息severity设为error，原代码误写为success，提升用户体验。

内容的提问来源于stack exchange，提问作者Kwaku Biney