Question

我有一个页面，我有两个标签。

如果数据活动值为true，则它必须将数据提供给HTML中的活动消息部分。
如果活动数据为false，则必须提供数据以关闭HTML中的消息部分。我怎么能这样做？

HTML：

<mat-tab label="Active">
  <mat-icon for="search">search</mat-icon>
  <input type="search" name="search" class="search" placeholder="Company">
  <ul>
    <li *ngFor="let message of activeMessages" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
      <span>{{message.date}}</span>
      <img src="{{message.image}}" alt="img" />
      <p style="padding-top: 16px;">{{message.name}}</p>
      <p ><b>{{message.subject}}</b></p>
    </li>
  </ul>
</mat-tab>
<mat-tab label="Closed">
  <mat-icon for="search">search</mat-icon>
  <input type="search" name="search" class="search" placeholder="Company">
  <ul>
    <li *ngFor="let closemessage of closedMessages" (click)="closeMessage(closemessage)" [class.activeShow]="closemessage.id == message_idc">
      <span>{{closemessage.date}}</span>
      <img src="{{closemessage.image}}" alt="img" />
      <p >{{closemessage.name}}</p>
      <p ><b>{{closemessage.subject}}</b></p>
    </li>
  </ul>
</mat-tab>

TS：

this.service
        .getMessages()
        .subscribe(
          data => {
            this.messagesdata = data;
            console.log(data);
            if(data.active== true) {
              this.activeMessages = this.messagesdata
            }
          },error => {});
  }

控制台输出：

Answer 1

过滤您的服务回复，例如

.subscribe(
          data => {
            this.messagesdata = data;
            let activeMsgs = data.filter(msg => msg.active == true)
                                 .map(m => { return m.messages});
            this.activeMessages = [].concat.apply([], activeMsgs);

            let closeMsgs = data.filter(msg => msg.active == false)
                                 .map(m => { return m.messages});
            this.closedMessages = [].concat.apply([], closeMsgs);
         }

Answer 2

这是您的要求，

收到回复后，只需过滤activeMessages和closedMessages并根据条件显示

您将变量声明为this.message_show，并将tab`` is changed, you make the消息部分'声明为实现，您可以根据需要获取消息。

<强>组件：

this.service
    .getMessages()
    .subscribe(
    data => {
        this.messagesdata = data;
        let activeMsgs = data.filter(msg => msg.active == true)
        this.activeMessages = activeMsgs;
        console.log(this.activeMessages);
        if (this.activeMessages.length > 0) {
            if (!this.message_show) {
                this.message_show = this.activeMessages[0];
                this.message = true;
                this.message_id = this.activeMessages[0].id
            }
        }
        let closeMsgs = data.filter(msg => msg.active == false)
        this.closedMessages = closeMsgs;
        if (this.closedMessages.length > 0) {
            if (!this.message_close) {
                this.message_close = this.closedMessages[0];
                this.message_idc = this.closedMessages[0].id
            }
        }
        console.log(this.closedMessages);
    }, error => { });

Answer 3

json pipe，这是一个如何显示数据值的示例

{{data | json}}

现在，您可以在控制台中看到数据的值。

如何使数据进入控制台以反映angular2中的HTML

3 个答案: