Angular 2控制台数据同步至HTML及按active值分栏展示消息的实现

其实核心思路很直白——把原本要打印到控制台的数据，同时存到组件类的属性里，再在HTML模板上绑定这个属性就行。我给你举两个常见场景的例子：

场景1：单次数据展示 #

比如你从接口拿到一条数据，既要打日志又要展示在页面上：

1. 组件类（.ts文件）

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

@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html'
})
export class DataDisplayComponent {
  // 定义一个属性存要展示的数据
  displayData: any;

  fetchData() {
    // 模拟接口返回的数据
    const apiData = { company: 'Angular Inc.', status: 'Active' };
    console.log(apiData); // 控制台输出
    this.displayData = apiData; // 同步到组件属性
  }
}

2. HTML模板（.html文件）
   用插值表达式绑定属性，再加个判断避免空值报错：

<button (click)="fetchData()">获取并展示数据</button>
<div *ngIf="displayData" class="data-card">
  <h3>公司信息</h3>
  <p>名称：{{ displayData.company }}</p>
  <p>状态：{{ displayData.status }}</p>
</div>

场景2：实时日志类输出 #

如果是持续产生的日志信息（比如接口请求日志），可以用数组来存储：

1. 组件类

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

@Component({
  selector: 'app-log-display',
  templateUrl: './log-display.component.html'
})
export class LogDisplayComponent {
  logList: string[] = [];

  addLog(message: string) {
    console.log(message); // 控制台输出
    this.logList.push(`[${new Date().toLocaleTimeString()}] ${message}`); // 存入数组
  }
}

2. HTML模板
   用*ngFor遍历数组展示：

<button (click)="addLog('用户发起登录请求')">添加测试日志</button>
<button (click)="addLog('登录请求成功')">添加成功日志</button>
<div class="log-container">
  <h4>实时日志</h4>
  <ul>
    <li *ngFor="let log of logList">{{ log }}</li>
  </ul>
</div>

你的需求本质是把原始数据按active字段拆分，分别绑定到两个标签页的列表里，我给你一步步说实现方式：

步骤1：组件类拆分数据 #

假设你有原始的消息数组，用数组的filter方法把数据分成两个数组：

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

@Component({
  selector: 'app-message-tabs',
  templateUrl: './message-tabs.component.html'
})
export class MessageTabsComponent implements OnInit {
  activeMessages: any[] = [];
  closedMessages: any[] = [];
  searchKeyword = ''; // 可选：用于搜索过滤

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 模拟从接口获取数据（实际项目换成你的API地址）
    this.http.get('/api/messages').subscribe((allMessages: any[]) => {
      // 按active字段拆分
      this.activeMessages = allMessages.filter(msg => msg.active === true);
      this.closedMessages = allMessages.filter(msg => msg.active === false);
    });
  }

  showMessage(message: any) {
    // 你的点击事件逻辑，比如弹窗展示详情
    console.log('点击的消息详情：', message);
  }

  // 可选：实现搜索过滤
  get filteredActiveMsgs() {
    return this.activeMessages.filter(msg => 
      msg.company.toLowerCase().includes(this.searchKeyword.toLowerCase())
    );
  }

  get filteredClosedMsgs() {
    return this.closedMessages.filter(msg => 
      msg.company.toLowerCase().includes(this.searchKeyword.toLowerCase())
    );
  }
}

步骤2：完善HTML模板 #

把你提供的代码补全，绑定拆分后的数组：

<mat-tab-group>
  <!-- Active标签页 -->
  <mat-tab label="Active">
    <div class="tab-content">
      <mat-icon>search</mat-icon>
      <input type="search" name="search" class="search" placeholder="Company"
             [(ngModel)]="searchKeyword">
      <ul>
        <li *ngFor="let message of filteredActiveMsgs" 
            (click)="showMessage(message)"
            class="message-item">
          {{ message.company }} - {{ message.title }}
        </li>
      </ul>
      <!-- 空状态提示 -->
      <div *ngIf="filteredActiveMsgs.length === 0" class="empty-tip">
        暂无Active状态的消息
      </div>
    </div>
  </mat-tab>

  <!-- Close标签页 -->
  <mat-tab label="Close">
    <div class="tab-content">
      <mat-icon>search</mat-icon>
      <input type="search" name="search" class="search" placeholder="Company"
             [(ngModel)]="searchKeyword">
      <ul>
        <li *ngFor="let message of filteredClosedMsgs" 
            (click)="showMessage(message)"
            class="message-item">
          {{ message.company }} - {{ message.title }}
        </li>
      </ul>
      <div *ngIf="filteredClosedMsgs.length === 0" class="empty-tip">
        暂无Close状态的消息
      </div>
    </div>
  </mat-tab>
</mat-tab-group>

这样就能实现：active: true的消息自动出现在Active标签页，active: false的出现在Close标签页，还支持搜索过滤功能~

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