Select do angular material não funciona

Front-end
, , ,
#1

Olá pessoal!
Estou tendo um problema com o select do angular material.
Eu estou usando o angular material em uma aplicação web com spring boot no back end, nela eu tenho um seletor que lista os as disciplinas que estão cadastradas no banco. Quando faço a seleção no front mostra que foi selecionado mais não salva o item na tabela.
Segue a imagem para facilitar a compreensão:
image

Observe na imagem que a coluna Cargo, Disciplina e Turma não salvou:

image
image770×208 9.46 KB

#2

HTML:

  <mat-form-field appearance="fill">
        <mat-label>Selecione a Disciplina</mat-label>
        <mat-select [(value)]="disciplinas">
          <mat-option>Nome</mat-option>
          <mat-option *ngFor="let curso of cursos"  value="cursos.id">{{curso.nomeDisciplina}}</mat-option>
        </mat-select>
      </mat-form-field>

TS:

cursos: Disciplina[] = [{id: '', nomeDisciplina: '', professores:[]}];
  cargos: Cargo[] = [{id: '', nomeCargo: '', professores:[] }];
  turmas: Turma[] = [{id: '', nomeTurma: '', professores:[], alunos:[]}];
   prof: Profissional = {
    id: '',
    nome: '',
    nascimento: '',
    sexo: '',
    cpf: '',
    rg: '',
    telefone: '',
    disciplinas:[],
    cargos: [],
    turmas: []
  }
ngOnInit(): void {
    this.findAllDisciplina();
    this.findAllCargo();
    this.findAllTurma();
  }

//Método que lista:
  findAllDisciplina():void {
    this.serviceDiscip.findAll().subscribe((resposta) => {
      this.cursos = resposta;
    })
  }
//Método que lista:
  findAllCargo():void {
    this.serviceCargo.findAll().subscribe((resposta) => {
      this.cargos = resposta;
    })
  }
//Método que lista:
  findAllTurma():void {
    this.serviceTurma.findAll().subscribe((resposta) => {
      this.turmas = resposta;
    })
  }