Предотвратить ошибку при изменении значения радио при загрузке компонента в Angular

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

html.component.html

...
<div>
    <input type = "radio" name = "period" [checked] = "asPeroidBtn === '1W'" (click) = "setDate( '1W' )"/><span>1 Week</span>
    <input type = "radio" name = "period" [checked] = "asPeroidBtn === '1M'" (click) = "setDate( '1M' )"/><span>1 Month</span>
    <input type = "radio" name = "period" [checked] = "asPeroidBtn === '3M'" (click) = "setDate( '3M' )"/><span>3 Months</span>
    <input type = "radio" name = "period" [checked] = "asPeroidBtn === '6M'" (click) = "setDate( '6M' )"/><span>6 Months</span>
</div>
...

html.component.ts

...
asPeroidBtn = '1W';
...
ngAfterViewInit() {
    this.setDate('1M');
}

setDate(period){
    this.asPeroidBtn = period;
}
...

Используя это, я получил ошибку:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'checked': 'true'. Current value: 'false'.
    at throwErrorIfNoChangesMode (core.js:5625)
    at bindingUpdated (core.js:13962)
    at Module.ɵɵproperty (core.js:14706)
    at GNB5100Component_Template (html.component.html:36)
    at executeTemplate (core.js:7449)
    at refreshView (core.js:7318)
    at refreshComponent (core.js:8465)
    at refreshChildComponents (core.js:7126)
    at refreshView (core.js:7368)
    at refreshEmbeddedViews (core.js:8419)

Помогите, пожалуйста, как исправить эту ошибку.