Cannot read properties of null (reading 'cursos')

No meu projeto em que conecto um banco php com angular para teste, estou tendo esse problema quando tento listar todos os objetos de um vetor. Esse é meu código da service:

@Injectable({
  providedIn: 'root'
})
export class CursoService {

//URL
  url = "http://localhost/api/php/";

  //Vetor
  vetor: Curso[];

  constructor(private http: HttpClient) { }

  //Obter todos os cursos
  obterCursos(): Observable<Curso[]>{
    return this.http.get(this.url+'listar').pipe(
      map((res) => {
        this.vetor = res['cursos'];
        return this.vetor;
      })
    )
  }

Meu component

  url = "http://localhost/api/php/";

  vetor:Curso[];

  curso = new Curso();

  constructor(private curso_servico:CursoService) { }

  ngOnInit() {
    this.selecao();
  }
  selecao(){
    this.curso_servico.obterCursos().subscribe(
      (res:Curso[])=>{
        this.vetor = res;
      }
    )
  }

e meu html

<table border="1">
  <tr *ngFor="let v of vetor">
    <td>{{v.nomeCurso}}</td>
    <td>{{v.valorCurso}}</td>  
  </tr>
</table>

Esse erro rola, mas no meu back end do php listar que eu chamo está tudo correto:

<?php
include("conexao.php");

$sql = "SELECT * FROM cursos";

$executar = mysqli_query($conexao, $sql);

$cursos = [];

$indice = 0;

while($linha = mysqli_fetch_assoc($executar)){
    $cursos[$indice]['idCurso'] = $linha['idCurso'];
    $cursos[$indice]['nomeCurso'] = $linha['nomeCurso'];
    $cursos[$indice]['valorCurso'] = $linha['valorCurso'];

    $indice++;
}
json_encode(['cursos'=>$cursos]);
?>