Relevant TypeScript code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-class-example',
  templateUrl: './ng-class-example.component.html'
})
export class NgClassExampleComponent implements OnInit {
  isBordered: boolean;
  classesObj: Object;
  classList: string[];

  constructor() { } 

  ngOnInit(): void { 
    this.isBordered = true;
    this.classList = ['blue', 'round']
    this.toggleBorder();
  }

  toggleBorder(): void {
    this.isBordered = !this.isBordered;
    this.classesObj = {
      bordered: this.isBordered
    };
  }
}

Corresponding template (the relevant part).

<div [ngClass]="classesObj">
  Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

Now I get an error in my .html file (around the attribute .bordered) stating that: "Property 'bordered' does not exist on type 'Object'".

I am new to TypeScript (and also JavaScript) but it seems to me that 'bordered' is defined on the object, so what is going on?

Thank you in advance!

CodePudding user response：

You can't just use classesObj: Object in TypeScript because it is assumed to be empty object {}. You need to use any like

classesObj: any;

Or if you want to be specific

classesObj: {
    bordered: boolean
};