在ngFor中的单选按钮上动态设置ngModel

问题描述

我有一个数组,其中包含以下内容

"extras": [
      {
        "model": "TAS","title": "Title One","desc": "The item description","options": [
          {
            "title": "Title 1"
          },{
            "title": "Title 2"
          }
        ]
      },{
        "model": "DOC","title": "Title Two","options": [
          {
            "title": "Title 2"
          },{
            "title": "Title 2"
          },{
            "title": "Title 3"
          }
        ]
      }
    ]

和以下HTML:

<mat-expansion-panel *ngFor="let e of extras;let i = index;">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{ e.title }}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-panel-description>
        {{ e.desc }}
      </mat-panel-description>

      <mat-radio-group aria-labelledby="extra items group label">
        <div class="extra-item" *ngFor="let eo of e.options">
          <mat-radio-button value="{{ eo.title }}" selected color="primary">
            <h3> {{ eo.title }} </h3>
          </mat-radio-button>
        </div>
      </mat-radio-group>
    </mat-expansion-panel>

这将创建2个单独的无线电组(1个用于TAS,1个用于DOC)。 我尝试在ngModel上添加mat-radio-group,但是这仅允许两个组中的一个值。 我也尝试过类似[(ngModel)]="extras[i]"之类的事情,但与此同时又遇到了错误。

我想从ngModel返回两个不同的结果(每个对象一个),这可以实现吗?

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)