Html 角度错误类型错误：无法读取属性'；forEach&x27；未定义的

我有一个表单，下面的代码是它的HTML代码。这个表单有两个选择菜单，我想通过点击submit按钮来改变这两个选择

<div class="form-popup playerOne" id="myForm_rsi" dir="rtl">
    <form action="/action_page.php" class="form-container" >  
      <label for="funcs"><b>  انتخاب دوره</b></label>

      <mat-select placeholder="انتخاب دوره اول" [(ngModel)] = "selectedValue1" name="rsi1">
          <mat-option *ngFor="let period of periods" [value]="period">
            {{ period }}
          </mat-option>
      </mat-select>

      <label for="funcs"><b>انتخاب دوره دوم</b></label>
      <mat-select placeholder="انتخاب دوره دوم" [(ngModel)] = "selectedValue2" name="rsi2">
        <mat-option *ngFor="let period of periods" [value]="period">
          {{ period }}
        </mat-option>
    </mat-select>

        <button type="submit" class="btn " style="margin-top: 200px;" (click)="setRsi(selectedValue1 , selectedValue2)">اعمال</button>
        <button type="button" class="btn cancel" onclick="closeForm()">انصراف</button>
    </form>
</div>

انتخاب دوره
{{period}}
انتخاب دوره دوم
{{period}}
اعمال
انصراف

但是，当我单击表单的提交按钮时，会收到以下错误消息：

ERROR TypeError: Cannot read property 'forEach' of undefined
    at new RSI (RSI.js:42)
    at rsi (RSI.js:58)
    at FlowComponent.setRsi (flow.component.ts:372)
    at Object.eval [as handleEvent] (FlowComponent.html:52)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at HTMLButtonElement.<anonymous> (platform-browser.js:1789)
View_FlowComponent_0 @ FlowComponent.html:52
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
FlowComponent.html:52 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 97, nodeDef: {…}, elDef: {…}, elView: {…}}

错误类型错误：无法读取未定义的属性“forEach”
在新的RSI（RSI.js:42）
在rsi（rsi.js:58）
在FlowComponent.setRsi处（flow.component.ts:372）
at Object.eval[作为handleEvent]（FlowComponent.html:52）
在handleEvent（core.js:38098）
在callWithDebugContext（core.js:39716）
在Object.debugHandleEvent[作为handleEvent]（core.js:39352）
在dispatchEvent（core.js:25818）
在core.js:37030
在HTMLButtoneElement。（platformbrowser.js:1789）
查看\u FlowComponent\u 0@FlowComponent.html:52
proxyClass@compiler.js:19436
logError@core.js:39651
handleError@core.js:9162
dispatchEvent@core.js:25822
（匿名）@core.js:37030
（匿名）@platform browser.js:1789
invokeTask@zone everyver.js:391
onInvokeTask@core.js:34182
invokeTask@zone evergreen.js:390
runTask@zone everyver.js:168
invokeTask@zone evergreen.js:465
invokeTask@zone evergreen.js:1603
globalZoneAwareCallback@zone evergreen.js:1629
FlowComponent.html:52错误上下文调试上下文{view:{…}，nodeIndex:97，nodeDef:{…}，elDef:{…}，elView:{…}

为什么会发生这种情况？我如何修复它