#First time using async pipe and getting an error? (no screenshots now)

7 messages · Page 1 of 1 (latest)

bold sun
#

my component (resume-header.component.ts):

@Component({
  selector: 'app-resume-header',
  templateUrl: './resume-header.component.html',
  styleUrls: ['./resume-header.component.css',
        '../../../shared/resume/css/style.css'],
  encapsulation: ViewEncapsulation.Emulated
}) 
export class ResumeHeaderComponent implements OnInit {
  isAdmin: boolean;
  testValue: BehaviorSubject<string> = new BehaviorSubject<string>("blank");
   // etc more code

and my template (resume-header.component.html):

<!-- Title -->
          <h2 *ngIf="!isAdmin || !title.isEditing"
              (click)="setIsEditingTrue(title)"
              [innerHtml]="testValue | async | blue">
          </h2>
          <mat-form-field *ngIf="isAdmin && title.isEditing">
            <input matInput autoFocus
                   (focusout)="saveChanges(title)"
                   [(ngModel)]="title.value"
                   placeholder="title"/>
          </mat-form-field>
          <!-- Description -->
          <p *ngIf="!isAdmin || !description.isEditing"
             (click)="setIsEditingTrue(description)"
             [innerHtml]="testValue | async | blue">
          </p>
#

and my two errors:

Compiled with problems:X

ERROR

src/app/core/home/resume-header/resume-header.component.html:13:40 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

13               [innerHtml]="testValue | async | blue">
                                          ~~~~~

  src/app/core/home/resume-header/resume-header.component.ts:9:16
    9   templateUrl: './resume-header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ResumeHeaderComponent.


ERROR

src/app/core/home/resume-header/resume-header.component.html:24:39 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

24              [innerHtml]="testValue | async | blue">
                                         ~~~~~

  src/app/core/home/resume-header/resume-header.component.ts:9:16
    9   templateUrl: './resume-header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ResumeHeaderComponent.
urban gorge
#

AyncPipe returns null until the Observable emits. I have never seen a good reason to do ]="whatever$ | async" You would be better off with 1 Observable and *ngIf since you didn't post your entire code I cannot show you what to do.

bold sun
#

so it was my blue pipe this whole time

#

my code is a mess

urban gorge
#

you appear to need more components