Angular/TypeScript インスタンスの配列について

Question

クラスから作成されるインスタンスの配列を作成したいのですが、下記のように書いたところ、ビルドはOK なのですが、html テンプレート側でメンバ変数にアクセスできません。
配列宣言の初歩的なところで間違えている気がするのですが、コンストラクタで初期値を与えたインスタンスの配列をTypeScript で作成するための方法を教えていただけないでしょうか。

export class BoxesComponent implements OnInit {
  boxes: Box[] = new Array(4); 

  constructor(private router:Router, 
              private changeDetectionRef: ChangeDetectorRef) {
   }

  ngOnInit(): void {
    this.changeDetectionRef.detectChanges();
  }

}

class Box{
  box_name:string;
  bookmark_num:number;
  box_message:string;

  constructor() {
    this.box_name = "test";
    this.bookmark_num = 3;
    this.box_message = "message_test";
   }
}

Comments

[miyabi_pudding]

> メンバ変数にアクセスできません。

これは、BoxesComponentのboxsメンバ自体ですか？
それとも、Boxクラスのメンバですか？

それと、HTMLテンプレートで拾おうとしている箇所だけでいいので記載してください。

[miyabi_pudding]

また、エラーが出ていたらビルド後のものでも構いませんので記載ください。
（コンパイル時にエラーが出てるのなら、そっちの方がありがたい）

Answer 1

まず、前提として、
Angularにおいては、テンプレートで扱いたいメンバに関しては、基本的には、クラスを型としては扱えません。
TypeScriptの処理上では可能ですが、
テンプレートで扱うものに関しては、
interface、type定義しか基本、型としては受け付けません。
コンパイルは通っても、ビルドで弾かれます。
（ただし、ある方法を使えば、クラスを型にでき、テンプレート上で扱える。が、無理矢理なやり方なのでお勧めできない）

というか、Angularは、コンポーネントないし、サービスでしかクラスを自然と扱えないような設計になっています。
これは、Angularがコンポーネント指向であるが故の設計といえるかと。
つまり、あくまでコンポーネント中心に開発しなさいよ、というフレームワークということです。

なので、今回の用途的にも、おそらく、interfaceで事足りるものと思われるので、
（あくまで型の定義であり、メソッドは特に必要ないように見受けられる。）
素直にinterface使いましょう。

あと、メソッドも入れたいって時でも、interfaceにもメソッド定義できたはずですしね。

Comments

[kbabags]

明瞭な回答、ありがとうございます。Interface を使うようにします。