如何对单个非列表对象执行“*ngFor”？

Question

我现在正在学习 Angular，我想知道如何将单个对象添加到我的组件中，如下所示：

我的目标是这样的：

export interface QuoteInfo {
    quote: string;
    author: string;
}

export interface Quotes{
    specialButton?: ButtonInfo;
    quotesList: QuoteInfo[];
}

我想做这个：

// Assume this is filled in with a Service with the "inject()" function
  quoteData: Quotes = {
    specialButton: undefined,
    quotesList: []
  };

<app-quotes 
    *ngFor="let x of quoteData"
        [quoteData]="x"
></app-quotes>

我知道如何使用 ngFor 来做到这一点，但是如果我只想要一个对象怎么办？我是一名试图学习前端的后端开发人员，所以几乎所有这些概念对我来说都是完全陌生的，我不知道这些概念叫什么。

基本上，我只想这样做，而不是“*ngFor”：

// Basically inject JUST this 
// singular object because I have 
// it hardcoded as only one item.

<app-quotes 
    [quoteData]
></app-quotes>

或者我是否必须将所有具有注入功能的服务项目作为列表？

Answer 1

尝试将 quoteData 的类型设置为“Quotes”数组，如下所示。

quoteData: Quotes[] = [
  {
    specialButton: undefined,
    quotesList: []
  }
];