3
respostas

error TS2322: Type 'string | null' is not assignable to type 'string | string[] | Set<string>

Boa tarde. Eu estou desenvolvendo um projeto angular e muitas das coisas que faço são baseados no que aprendi aqui porém a aplicação esta sendo feito no modo strict. Fui implementar a barra de loading$ na minha aplicação porém recebo esse erro.

error TS2322: Type 'string | null' is not assignable to type 'string | string[] | Set<string> | { [klass: string]: any; }'.
  Type 'null' is not assignable to type 'string | string[] | Set<string> | { [klass: string]: any; }'.

1 <hr [ngClass]="loading$ | async">
       ~~~~~~~

  src/app/shared/loading/loading.component.ts:8:18
    8     templateUrl: './loading.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoadingComponent.

.

3 respostas

Fala ai Adria, tudo bem? Parece que teu código é passivo de retornar null mas o contexto que ele está sendo aplicado exige que um valor seja passado, seja uma string, um arrayou Set de string.

Talvez tu precisa fazer um if e se for null retorna uma string vazia.

Espero ter ajudado.

Oi, Matheus, onde exatamente eu faria isso? Segue meu código: loading.component.ts

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { LoadingService } from "./loading.service";

@Component({
    selector: 'app-loading',
    templateUrl: './loading.component.html',
    styleUrls: ['./loading.component.css']
})
export class LoadingComponent implements OnInit {
   loading$!: Observable<string>;

   constructor(private loadingService: LoadingService) { }

   ngOnInit(): void {
      this.loading$ = this.loadingService
      .getLoading()
      .pipe(map(loadingType => loadingType.valueOf()));
      //teremos como retorno o valor da string do enum
   }
} 

loading.component.html

<hr [ngClass]="loading$ | async">

Fala Adria, tu poderia converter a propriedade loading$ para uma string e passar o valor dela na resolução do getLoading dentro do ngOnInit, dessa forma nem precisa do pipe async no ngClass.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software