typescript - Angular 13 asynkron datahämtning

När jag visar ett verktygstips-felmeddelande i HTML får jag följande fel:

"Typen 'unknown' kan inte tilldelas typen 'string'. ngtsc(2322)"

Skärmdump

TypeScript-kod

export class ValidationErrorComponent implements OnInit {
  @Input() control!: FormControl;
  @Input() customErrors: ErrorType = {};
  error$: any;

  constructor(public errorStateMatcher: ErrorStateMatcher) {}

  ngOnInit() {
    const setError = (ctrl: any) => {
      let errorStr = '';
      Object.entries(ctrl).map(([error, value]: any) => {
        let getError = this.customErrors[error] || FORM_ERRORS[error];
        if (getError != undefined) {
          errorStr += `• ${getError(value)}.\n`;
        }
      });
      return errorStr;
    };

    this.error$ = this.control.statusChanges.pipe(
      tap(console.log),
      startWith({}),
      map((value) => setError(this.control.errors || {}))
    );
  }
}

och det här är min html-kod

<mat-icon *ngIf="errorStateMatcher.isErrorState(control, null) && (error$) | async as error " color="warn"
    [matTooltip]=error matTooltipClass="tool-tip">
    error_outline
</mat-icon>

Felmeddelanden bör visas asynkront. Vänligen hjälp till att lösa detta fel.

Svar #1

Skapa en variabel för att lagra felmeddelandet som sätts till mat-verktygsstips

ts

export class ValidationErrorComponent implements OnInit {
  @Input() control!: FormControl;
  @Input() customErrors: ErrorType = {};
  error$: any;
  error : string;

  constructor(public errorStateMatcher: ErrorStateMatcher) {}

  ngOnInit() {
    const setError = (ctrl: any) => {
      let errorStr = '';
      Object.entries(ctrl).map(([error, value]: any) => {
        let getError = this.customErrors[error] || FORM_ERRORS[error];
        if (getError != undefined) {
          errorStr += `• ${getError(value)}.\n`;
        }
      });
      return errorStr;
    };

    this.error$ = this.control.statusChanges.pipe(
      startWith({}),
      tap((value) => this.error = setError(this.control.errors || {}))
    );
  }
}

html

<mat-icon *ngIf="errorStateMatcher.isErrorState(control, null) && error" color="warn" [matTooltip]="error" matTooltipClass="tool-tip">

Svar #2

Problemet orsakas av det faktum att din error-variabel i mallen är av typen unknown, medan attributbindningen [matToolTip] förväntar sig en string.

Kan du försöka skriva din error$ observerbara enligt följande:

export class ValidationErrorComponent implements OnInit {
  @Input() control!: FormControl;
  @Input() customErrors: ErrorType = {};
  error$: Observable<string>;

  constructor(public errorStateMatcher: ErrorStateMatcher) {}

  ngOnInit() {
    const setError = (ctrl: any) => {
      let errorStr = '';
      Object.entries(ctrl).map(([error, value]: any) => {
        let getError = this.customErrors[error] || FORM_ERRORS[error];
        if (getError != undefined) {
          errorStr += `• ${getError(value)}.\n`;
        }
      });
      return errorStr;
    };

    this.error$ = this.control.statusChanges.pipe(
      tap(console.log),
      startWith({}),
      map((value) => setError(this.control.errors || {}))
    );
  }
}

Jag tror också att du har parenteserna felplacerade runt din async-sats i din mall. Vänligen uppdatera till:

<mat-icon *ngIf="errorStateMatcher.isErrorState(control, null) && (error$ | async as error) " color="warn"
    [matTooltip]=error matTooltipClass="tool-tip">
    error_outline
</mat-icon>