使用继承和画布的Angular-2项目

Question

我有一个期中项目。在这个项目中，将使用Angular-2。他们想让我做以下程序:程序将在画布上画一个圆，一个正方形和一个矩形。它们将与3个按钮一起发生。单击按钮时将出现的几何形状将位于前一个按钮的右侧。此外，每次单击该按钮时，形状的新创建区域都将打印在列表中。这些类是: baseClass: Polygon，subClasses: Draw_Circle，Draw_Square，Draw_Rectangle我可以计算面积。但是我不能在屏幕上打印列表。我可以继续往前走。我被困在这一点上了。我是Angular-2的新手。你的建议是什么？我该如何继续？我很乐意帮助你。

我的代码如下：

  Canvas.ts

  import { Component, NgZone } from '@angular/core';
   import { DomSanitizationService } from '@angular/platform-browser';
   import { bootstrap } from '@angular/platform-browser-dynamic';
   @Component({
selector: 'Canvas_component',
templateUrl: 'WebSite/Components/CanvasComponent/Canvas.html',
styleUrls: ['WebSite/Components/CanvasComponent/Canvas.css']
})

export class CanvasComponent {
ctx: CanvasRenderingContext2D;
mainCanvas: HTMLCanvasElement;
public AreaList: Polygon[] = [];
constructor() { }
move: number = 0;
rect: Draw_Rectangle = new Draw_Rectangle();
circ: Draw_Circle = new Draw_Circle();
squ: Draw_Square = new Draw_Square();

public PolygonAreaList() {
    var c: Caller = new Caller();
    c.CallArea(this.circ);
    c.CallArea(this.squ);
    c.CallArea(this.rect);
    var shapeCrc: Draw_Circle = new Draw_Circle();
    var shapeSq: Draw_Square = new Draw_Square();
    var shapeRect: Draw_Rectangle = new Draw_Rectangle();
    shapeCrc.Draw();
    shapeSq.Draw();
    shapeRect.Draw();
  }

 }
 export class Polygon{
 ctx: CanvasRenderingContext2D;
 mainCanvas: HTMLCanvasElement;
 public shift: number = 0;

public Edge1: number = 0;
public Edge2: number = 0;
result: number;

constructor(edge1: number, edge2: number) {     
    this.Edge1 = edge1;
    this.Edge2 = edge2;
 }
 public Area(): number { return 0; }
 public Draw(): void { }
}
class Draw_Circle extends Polygon {

constructor(radius = (Math.floor(Math.random() * 10) + 5)) {
    super(radius, radius);
}
public Area(): number {
    this.result = 3 * this.Edge1 * this.Edge1;

    return this.result;

}

public Draw(): void {

    this.mainCanvas = 
 <HTMLCanvasElement>document.getElementById('myCanvas');
    this.ctx = this.mainCanvas.getContext("2d");

    this.ctx.beginPath();

    this.ctx.arc(20 + this.Edge1, 15, this.Edge1, 0, 2 * Math.PI);
    this.ctx.stroke();
   }
  }
  class Draw_Square extends Polygon  {
  constructor(side = (Math.floor(Math.random() * 10) + 5)) {
    super(side, side);
}
public Area(): number {
    this.result = this.Edge1 * this.Edge1;
    return this.result;
}
public Draw() {
    this.mainCanvas = <HTMLCanvasElement>document.getElementById('myCanvas');
    this.ctx = this.mainCanvas.getContext("2d");
    this.shift += 40;
    this.ctx.beginPath();
    this.ctx.rect(40 + this.Edge1, 15, this.Edge1, this.Edge1);
    this.ctx.stroke();
   }
}
 class Draw_Rectangle extends Polygon {
  constructor(side1 = (Math.floor(Math.random() * 10) + 5), side2 = (Math.floor(Math.random() * 10) + 5)) {
    super(side1, side2);
   }
   public Area(): number {
    this.result = this.Edge1 * this.Edge2;
    return this.result;
   }
   public Draw() {
    this.mainCanvas = <HTMLCanvasElement>document.getElementById('myCanvas');
    this.ctx = this.mainCanvas.getContext("2d");
    this.shift += 40;
    this.ctx.beginPath();
    this.ctx.rect(80 + this.Edge2, 15, this.Edge1, this.Edge2);
    this.ctx.stroke();
 }
 }

 class Caller {
public arr: number[] = [];
public circle: number = 0;
public square: number = 0;
public rectangle: number = 0;
public CallArea(sh: Polygon): void
    {
    var a: number;
    var arr: number[] = [];
    a = sh.Area();
    arr.push(a);


 }
   }


Canvas.html


  <div>
       <canvas id="myCanvas" class="myCanvas_class"></canvas>
  </div>
  <p></p>
  <p></p>
  <div class="info_div_class">
     <button (click)="PolygonAreaList()">Draw Circle</button>
<p></p>
<div *ngFor="let lst of arr">
    <ul>
        <li>{{lst}}</li>
    </ul>
</div>
</div>
<p></p>
 <p></p>
<div class="info_div2_class">
<button (click)="Click()">Draw Square</button>
</div>
 <p></p>
 <p></p>
 <div class="info_div3_class">
<button (click)="Click()">Draw Rectangle</button>
</div>


 Canvas.css

 .myCanvas_class{
 background-color:lightgray;
 width:100%;
 height:60%;
 }
 .info_div_class{
 float: left;
 background-color: darkcyan;
 height: 20%;
 width: 33%;
 text-align:center;
 }
 .info_div2_class{
 float: left;
 background-color: darkcyan;
 height: 20%;
 width: 33%;
 text-align:center;
}
.info_div3_class{
 float: left;
 background-color: darkcyan;
 height: 20%;
 width: 33%;
 text-align:center;
 }

Answer 1

要在模板中显示列表，可以执行以下操作：

<div *ngFor="shape in AreaList">{{shape}}</div>