设置焦点在垫子按钮上动态不工作

在我的应用程序中，我有一个输入字段，用户可以在其中输入城市代码，并在焦点out服务将被调用以获取城市详细信息和搜索按钮将被启用和聚焦。当用户输入城市代码和标签时，一切都如预期的那样工作，但焦点没有被设置为搜索按钮。我知道禁用按钮将不会接收焦点事件，但只有在启用按钮后才设置焦点，但它似乎仍然不起作用。

Ts

export class InputErrorsExample {
city = new FormControl('');
search: boolean = false;
fetchCityDetails() {
setTimeout(() => {
// calling service to fetch details
this.search = true;
let btn = document.getElementById('search');
if (btn) btn.focus();
}, 1000);
}
}

<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>City</mat-label>
<input type="text" matInput [formControl]="city" (focusout)="fetchCityDetails()">
</mat-form-field>
<button tabindex="0" id="search"  mat-raised-button color="primary" [disabled] = "!search">Search</button>
</form>

这是stackblitz的链接https://stackblitz.com/edit/angular-ymkvhp?file=src%2Fapp%2Finput-errors-example.html。