Question

我有一个组件，它有几个函数可以订阅从我的服务中的一个observable返回的数据。这工作正常，但我想重构我的代码，以便我可以在常量中访问该数据，并简单地循环浏览我视图中的数据。

我遇到的问题是，当我想从我的常数中读取对象的属性时，例如value: this.price.market_price_usd,我在控制台中收到未定义的错误。我还尝试通过value: '${this.price.market_price_usd}',这样的方式来插入数据。这只是返回一个字符串。看来问题是我的常数不知道这些数据。如何重构我的代码，以便我可以在常量中访问此数据并在模板中读取它？以下是相关代码。

组件

constructor(private data: DataService) {
    this.loadstate = data.loadstate;
    this.subscription = data.nameChange.subscribe((value) => {
        this.loadstate = value;
    });
}

getPrice() {
    this.data.getData(this.API_Price)
    .subscribe( 
        price => this.price = price,
        error => this.errorMessage_price = <any>error);

}

getBlockSize() {
    this.data.getData(this.API_Block_Size)
    .subscribe(
        size => this.size = size.toFixed(2),
        error => this.errorMessage_size = <any>error);
}

getTransactions() {
    this.data.getData(this.API_Transactions)
    .subscribe(
        transactions => this.transactions = transactions.values.slice(-1)[0].y.toLocaleString(),
        error => this.errorMessage_transactions = <any>error);
}

getMempool() {
    this.data.getData(this.API_Mempool)
    .subscribe(
        mempool => this.mempool = Math.trunc(mempool.values[0].y).toLocaleString(),
        error => this.errorMessage_mempool = <any>error);
}

恒

export const statsConstant = {
STATS: {
    ERROR: {
        message_1: 'There is a problem connecting to the API.',
        message_2: 'Please wait a moment and try again.'
    },
    ROW_1: [
    {
        title: 'Market Price USD',
        value: this.price.market_price_usd,
        error: 'errorMessage_price',
        errorMessage_1: 'There is a problem connecting to the API.',
        errorMessage_2: 'Please wait a moment and try again.',
        subtitle: 'Average USD market price across major bitcoin exchanges',
        symbol: 'USD'
    },
    {
        title: 'Average Block Size',
        value: this.size,
        error: 'errorMessage_size',
        errorMessage_1: 'There is a problem connecting to the API.',
        errorMessage_2: 'Please wait a moment and try again.',
        subtitle: 'The 24 hour average block size in MB.',
        symbol: 'Megabytes'
    }
    ],
    ROW_2: [
    {
        title: 'Transactions per Day',
        subtitle: 'The aggregate number of confirmed Bitcoin transactions in the past 24 hours.'
    },
    {
        title: 'Mempool Size',
        subtitle: 'The aggregate size of transactions waiting to be confirmed.'
    }
    ]
}
}

模板

 <div class="row">
    <div 
        class="col-sm-6 stats"
        *ngFor="let stat of stats.STATS.ROW_1">
        <div class="u-centerX">
            <h5>{{stat.title}}</h5>
        </div>
         <div class="u-centerX">
            <div 
                class="alert alert-danger" role="alert"
                *ngIf="stat.error === true">
                <p>{{stat.errorMessage_1}}.</p>
                <p>{{stat.errorMessage_2}}.</p>
            </div>
        </div>
        <div class="u-centerX">
             <div 
                *ngIf="loadstate"
                class="loader">
            </div>
            <div
                *ngIf="price.market_price_usd"
                class="stats-data">
                <a href="https://blockchain.info/charts/market-price">
                    <h1>${{stat.value}}</h1>
                    <span>{{stat.symbol}}</span>
                </a>
            </div>
        </div>
        <div class="u-centerX">
            <p>{{stat.subtitle}}</p>
        </div>
    </div>
</div>

Answer 1

您无法使用常量来动态更改数据。正如其名称所示，常量是常量，不能接收值的变化。但是，当您异步请求您的值时，您肯定会有值更改。

但解决方案应该很简单：

不要将statsConstant声明为const，而应将其声明为您的组件类的属性。现在，当您的异步调用返回时，可以突变值。
使用空值初始化动态值（例如stats.value）。我会在这里选择null。
只要异步调用返回数据，就会用实际值覆盖emtpy值。之后，您的视图应自动更新。

之后，不再需要另外指定this.price和this.size。

你谈到了重构。我的建议是移动所有stats数据结构并将其提取到自己的服务。然后，您的组件只能使用此单一服务API来获取整个统计数据。您的服务将负责建立它。在我看来，这会更清晰。

如何从常量中的组件访问对象？

1 个答案: