Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ignore a template error in angular for build

I am using this lib

tl;dr : How to ignore a "property not defined" in typescript

In order to create a custom plonter the doc say to look at their implementation and I copied their basic code and the template looks like this =>

<ac-html *ngIf="plonterService.plonterShown" [props]="{
  position: plonterPosition
}">
  <div class="plonter-context-menu">
    <div *ngFor="let entity of plonterService.entitesToPlonter">
      <div class="plonter-item" (click)="chooseEntity(entity)">

        {{ entity?.name || entity?.id }}
      </div>
    </div>
  </div>
</ac-html>

the component

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { CoordinateConverter, PlonterService } from 'angular-cesium';

@Component({
  selector: 'app-entity-plonter',
  templateUrl: './entity-plonter.component.html',
  styleUrls: ['./entity-plonter.component.less'],
  providers: [CoordinateConverter],
})
export class EntityPlonterComponent implements OnInit {

  constructor(public plonterService: PlonterService,
              private chandeDetector: ChangeDetectorRef,
              private coordinateConverter: CoordinateConverter) { }

  ngOnInit() {
    this.plonterService.plonterChangeNotifier.subscribe(() => this.chandeDetector.detectChanges());
  }

  get plonterPosition() {
    if (this.plonterService.plonterShown) {
      const screenPos = this.plonterService.plonterClickPosition.endPosition;
      return this.coordinateConverter.screenToCartesian3(screenPos);
    }
  }

  chooseEntity(entity: any) {
    this.plonterService.resolvePlonter(entity);
  }
}

now, I have an error in the template on the line

{{ entity?.name || entity?.id }}

AcEntity doesn't have a property name and id.

this is because in the lib, AcEntity is defined like this

/**
 * Angular Cesium parent entity, all entities should inherit from it.
 * ```typescript
 * entity= new AcEntity({
 *      id: 0,
 *      name: 'click me',
 *      position: Cesium.Cartesian3.fromRadians(0.5, 0.5),
 * });
 * ```
 */
export class AcEntity {

  /**
   * Creates entity from a json
   * @param json entity object
   * @returns entity as AcEntity
   */
  static create(json?: any) {
    if (json) {
      return Object.assign(new AcEntity(), json);
    }
    return new AcEntity();
  }

  /**
   * Creates entity from a json
   * @param json (Optional) entity object
   */
  constructor(json?: any) {
    Object.assign(this, json);
  }
}

now, I know the error is legit, but I would like to ignore it for the compile and for the builds. Since I have no control over the library directly and the value is coming from a service of the library.

Is it possible ?

like image 377
Bobby Avatar asked Dec 18 '22 17:12

Bobby


1 Answers

I don't know if anyone is still looking for an answer for this, but just thought I'd add an answer that I found for it. You can skirt the template error by wrapping the object with $any(object). So, in this case, it would look like:

<div *ngFor="let entity of $any(plonterService).entitesToPlonter">
like image 101
Matt Smith Avatar answered Jan 02 '23 17:01

Matt Smith