如何在 HTML 中查看我的 typeScript 的结果？答案

【问题标题】：How can i see the result form my typeScript in the HTML?如何在 HTML 中查看我的 typeScript 的结果？
【发布时间】：2021-02-02 11:57:01
【问题描述】：

这是我的 HTML
*我改变了所有的代码

<div class="testCenter">
    <h1>{{teston()}}</h1>
</div>

这是我的 .ts 代码函数 teston() 我不知道它是否有意义

import { Component, OnInit } from '@angular/core';
import { Carte } from '../mesClass/Carte'; // importation de la class Carte

@Component({
  selector: 'app-gestion-poker',
  templateUrl: './gestion-poker.component.html',
  styleUrls: ['./gestion-poker.component.css']
})
export class GestionPokerComponent implements OnInit {

  test:Carte;

  constructor() { }

  ngOnInit(): void {
  }


  teston(){

  return this.test.carte(1);
    
  }

}

这是我的课程 Carte.ts

export class Carte {

    // Attributs
    sorte = new Array;
    
    carte(sor){

        this.sorte = sor;
      

        sor = ["hello","Bob"];
       
        
    }

}

所以我想做的是在我的 HTML 中看到：鲍勃
似乎没有任何工作我错过了什么吗？

【问题讨论】：

是的，您需要在 TS 中设置一个属性，然后您需要在 HTML 中使用花括号引用该 bound 属性。 Angular 教程中对此进行了描述：angular.io/tutorial/toh-pt1#show-the-hero
return this.cartes(sor, val); 你只是建立了一个无限循环。而return this.carte.cartes(1, 3); 将不起作用，因为sor 和val 应该是数组，但您使用数字作为输入。

标签： javascript html node.js angularjs typescript

【解决方案1】：

我认为：

您的测试未定义。您需要创建一个新的 Carte 类型对象。
在您的 carte 类中，您正在创建一个类型为数组的公共 globa 变量，但在函数 cart(sor) 中，您用数字覆盖它。

根据您的代码，我认为您需要这样的想法：

export class Carte {
    sorte: Array<string> = ['hello', 'Bob'];
    
    carte(sor){
      return this.sorte[sor]  
    }
}

在你的 ts 文件中是这样的：

import { Component, OnInit } from '@angular/core';
import { Carte } from '../mesClass/Carte'; // importation de la class Carte

@Component({
  selector: 'app-gestion-poker',
  templateUrl: './gestion-poker.component.html',
  styleUrls: ['./gestion-poker.component.css']
})
export class GestionPokerComponent implements OnInit {

  test:Carte;

  constructor() { }

  ngOnInit(): void {
     this.test = new Carte();
  }


  teston(){
     return this.test.carte(1);
  }

}

【讨论】：

很好，感谢您不只是发布代码，解释使它变得更加容易。