TypeScript数组随机对象内容无法在<p>标签输出问题求助

1. 在组件类中实现随机获取content的逻辑 #

在app.component.ts中定义数据数组，并添加生成随机内容的方法：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  items = [ 
    { id: '1', category: 'comedy', content: 'Millers' },
    { id: '2', category: 'horror', content: 'Sinister' }
  ];
  randomContent: string = '';

  ngOnInit(): void {
    this.fetchRandomContent();
  }

  fetchRandomContent(): void {
    // 生成合法的随机索引
    const randomIdx = Math.floor(Math.random() * this.items.length);
    this.randomContent = this.items[randomIdx].content;
  }
}

2. 在模板中输出随机内容 #

在app.component.html里用<p>标签绑定变量显示内容：

<p>{{ randomContent }}</p>

如果需要手动刷新随机内容，可添加触发按钮：

<p>{{ randomContent }}</p>
<button (click)="fetchRandomContent()">刷新随机内容</button>

核心逻辑说明 #

• Math.random() 生成0到1之间的浮点数，乘以数组长度后得到0到数组长度的范围值
• Math.floor() 将浮点数向下取整，得到0到数组长度-1的合法索引，确保不会超出数组边界
• 通过索引从数组中取出对应对象，提取content字段赋值给模板绑定变量

内容的提问来源于stack exchange，提问作者LasagneLover