Question

我目前正在使用Angular应用，遇到了一个我找不到任何解决方案的问题。

我有这个架构：

const ContentSchema = new mongoose.Schema({
subject: String,
customer: String,
task: String,
date: Date,
inCharge: String,
comment: [String] })

我的Angular-App中的此方法在组件初始化时检索内容。

  this.contentServ.getContent()
      .subscribe(data => this.contents  = data as mycontent[])

这是我的服务访问api的方式

getContent(): Observable<mycontent[]> {
    return this.http.get<mycontent[]>('/api/retrieveContent')
  }

这是即时消息的显示方式

 <tr *ngFor="let content of contents">
      <th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>      
      <th>{{content.subject}}</th>
      <th>{{content.customer}}</th>
      <th>{{content.task}}</th>
      <th>{{content.date | date : "dd.MM.yyyy" }}</th>
      <th>{{content.inCharge}}</th>
      <th>{{content.comment}}</th>
    </tr>

当我这样做时，我的评论会显示出来，但是当它们从数据库中被JS传递时会显示出来：

{ comment: [ 'This is my first comment', 'i can now add another one' ],
    _id: 5bd0221100acd00f5bf8800d,
    subject: 'Application Development',
    customer: 'myCustomer',
    task: 'myTask',
    date: 2018-10-15T00:00:00.000Z,
    inCharge: 'myOfficial',
    __v: 0 }

现在的问题是，{{content.comment}}是我无法通过以下操作访问的数组：

<tr *ngFor="let content of contents, let i = index">
      <th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>      
      <th>{{content.subject}}</th>
      <th>{{content.customer}}</th>
      <th>{{content.task}}</th>
      <th>{{content.date | date : "dd.MM.yyyy" }}</th>
      <th>{{content.inCharge}}</th>
      <th>{{content.comment[i]}}</th>
    </tr>

也尝试过：

<tr *ngFor="let content of contents">
      <th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>      
      <th>{{content.subject}}</th>
      <th>{{content.customer}}</th>
      <th>{{content.task}}</th>
      <th>{{content.date | date : "dd.MM.yyyy" }}</th>
      <th>{{content.inCharge}}</th>
      <th><ul *ngFor="let content.comment of content.comments, let i = index><li>{{content.comment[i]}}</li></th>
    </tr>

我什至尝试这样做：

<th id="displayComments"></th>

然后做

 document.getElementById("displayComments").innerHTML = {{this.contents.comment}}.join(" <br> ");

但是，这似乎并没有奏效。

我的目标是在我的表中获得类似的输出

  <tr *ngFor="let content of contents">
          <th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>
          <th>{{content.subject}}</th>
          <th>{{content.customer}}</th>
          <th>{{content.task}}</th>
          <th>{{content.date | date : "dd.MM.yyyy" }}</th>
          <th>{{content.inCharge}}</th>
          <th><ul>
<li>My Comment nr. 1</li>
<li>My Comment nr. 2</li>
</ul></th>
        </tr>

我希望你们中的某些人能够帮助我解决我的问题。

如果您需要我的代码的更多信息，我会尽快将其提供给您。

Answer 1

首先，如果可能，创建一个stackblitz或plunkr演示。

尝试更改

<th><ul *ngFor="let content.comment of content.comments, let i = index><li>{{content.comment[i]}}</li></th>
</tr>

对此，

<th><ul *ngFor="let comment of content.comments"><li>{{comment}}</li></th>
</tr>

它可以解决您的问题

Answer 2

您可以构建一个自定义组件，该组件将comments数组作为输入，并在该组件内部，可以在该数组上使用*ngFor来输出所需的标记。

在Angular App中将数组文档显示为表格

2 个答案: