Angular 如何检索json值并存储在变量4中

我有这样的JSON，请看下面的

{
  "Semester": [
    {
      "queueName": "Science",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Chemistry",
          "sectionOne": 100,
          "sectionTwo": 50,
          "onTrackTradeCount": 150
        },
        {
          "subjectName": "Biology",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    },
    {
      "queueName": "Arts",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Indexing",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    },
    {
      "queueName": "Humanity",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Indexing",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    }
  ]
}

学期值显示在使用matselect angular material的“多选”下拉列表中。如果有人选择了特定学期，相应的科目名称应显示在另一个下拉列表中

---

我没有办法做到这一点，请帮助

因此，在您的组件中，可能会有类似的内容

 public form: FormGroup = new FormGroup({
    semester: new FormControl(''),
 });

这是一个选项，现在您必须获得mat select值。subjectDetails是一个数组对象，因此，您只需填充另一个下拉列表

 <mat-select formControlName="semester" required placeholder="Semester">
            <mat-option *ngFor="let semester of JsonSemester"
                        [value]="semester.subjectDetails">
              {{ semester.queueName}}
            </mat-option>
    </mat-select>

{{Serm.queueName}

如果我正确理解了您的问题，您需要使用类似于以下内容的模板：

<mat-form-field>
<mat-select>
  <mat-option *ngFor="let sem of Semester" [value]="sem.queueName" formControlName="firstDropdown">
    {{ sem.queueName }}
  </mat-option>
</mat-select>
<mat-select>
  <mat-option *ngFor="let sub of selectedSemester.subjectDetails">
    {{ sub.subjectName }}
  </mat-option>
</mat-select>
</mat-form-field>

希望这能有所帮助，但具体的实现在很大程度上取决于应用程序的其余部分

---

祝你好运

如果我没记错的话，你的要求是学期项目有一个下拉列表，然后在第一个下拉列表的基础上再下拉一个科目

 <mat-select formControlName="semester" required placeholder="Semester">
            <mat-option *ngFor="let semester of JsonSemester"
                        [value]="semester.subjectDetails">
              {{ semester.queueName}}
            </mat-option>
    </mat-select>

在*.component.html中

<mat-form-field>
 <mat-select placeholder="Semester" [(value)]="choosenSub">
  <mat-option *ngFor="let sem of Semester" [value]="sem.subjectDetails">
   {{ sem.queueName }}
  </mat-option>
 </mat-select>
</mat-form-field>
 <br>
<mat-form-field>
 <mat-select placeholder="Subject">
  <mat-option *ngFor="let sub of choosenSub" [value]="sub.subjectName" >
   {{ sub.subjectName }}
  </mat-option>
 </mat-select>
</mat-form-field>

以下是它的工作原理：

---

感谢您的回复，它适用于multi-select？如果我选择了一个以上的学期，它将如何工作？我的表格也没有定义在任何地方，请guide@mjck如果您希望它适用于multiple select，那么您需要将

SelectedSerm

更改为一个列表，并修改observable回调以将该变量设置为希望第二个下拉列表迭代的数组。这可能会很复杂，但希望基于反应式的表单可以为您提供一些所需的背景信息

myForm

需要在某个地方定义为类型Angular

FormGroup

，可以从

@Angular/forms

@Danial导入。感谢您的回复，如果您与我分享这个工作示例，这将非常有帮助。感谢您的回复，它的第二个下拉列表值不可见。另外，如果我选择了多个semster，它将如何工作，请通知您也可以看到第二个下拉列表值，请参阅附加的SS I和stackblitz链接以获取代码。我使用另一个下拉列表更新了，您可以在其中选择多个项，并将所选值存储在[]中。对于每个选择，我都会记录更新的[]。您可以使用该[]获取主题名列表，然后在第二个下拉列表中填充感谢您的帮助，它几乎可以正常工作，但我在multi-select上获得重复值，请建议如何解决。您可以与我共享完整的代码吗，提前谢谢

choosenSub = '';