обновить выпадающий список до значения по умолчанию, когда происходит другое событие

Question

У меня есть компонент многократного использования / общего доступа в моем приложении angulalr 6, как показано ниже для раскрывающегося списка.

 <shareddropdown-list-payments [valuesArray]="cashAccountLoaded" [defaultString]="defaultFromString"
          (outputEvent)="fromAccount($event)" tosca-id="new-transfer-step1-select-from"  [showAllAccountButton]="false" #fromAccoutDropDown>
        </shared-dropdown-list-payments >

Так что это работает хорошо, теперь я хотел бы обновить этот комобокс до его значения по умолчанию, когда какое-то другое событие встречается на странице.

Я пытался, как показано ниже

document.getElementById('fromAccoutDropDown').selectedIndex=0;

, но это не помогает.

РЕДАКТИРОВАТЬ //

@ViewChild(DropdownListPaymentsComponent) accntDropDown: DropdownListPaymentsComponent;


 clearForm(form: NgForm) {
    this.submitted = false;
    form.resetForm();
    if (this.click=='RedSlip' ) {
      this.accntDropDown.defaultString ="i18n.WID_TRA_selectAccountInternal"
      this.accntDropDown.defaultString="11"
    }
    if (this.click=='OrangeSlip') {
      this.accntDropDown.defaultString ="11" } this.ref.detectChanges(); }

Answer 1

Принятие родительского элемента в качестве ParentComponent

Доступ к дочернему элементу (sharedDropdownComponent) в вашем родительском элементе:

 export class ParentComponent implements OnInit {
      @ViewChild(shareddropdownComponent) sharedDropdown: shareddropdownComponent;
 }

Теперь, когда вы выберете вкладку 1/2, назначьте ее для события click и привяжите этот click к метод в ts вашего родителя как

<div (click)="resetDropdown()"> 
Tab 1
</div> 

<div (click)="resetDropdown()"> 
Tab 2
</div> 

в ts родителя

resetDropdown() {
// this.sharedDropdown.your_dropdown_reset_logic  // dropdown reset method declared in child's component.
}

Answer 2

fromAccoutDropDown является ссылочной переменной шаблона, поэтому к ней нельзя обращаться через document.getElementById, вы должны использовать @ViewChild в своем компоненте:

@ViewChild('fromAccoutDropDown', {static: false}) fromAccoutDropDown: SharedDropdownListPaymentsComponent;

теперь вы можете получить доступ к publi c элементы экземпляра и метод SharedDropdownListPaymentsComponent на fromAccountDropDown