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 ?
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With