Angular5學習筆記 - 配置Http（七）

1、引入Http模塊

編輯\src\app\app.module.ts文件

import { HttpModule } from '@angular/http';
  /* 註冊模塊 */
  imports: [
    HttpModule,
  ],

2、編輯列表畫面

編輯\src\app\components\users\list\list.component.html文件，這裏用到了ng-zorro組件庫相關配置看看下節內容。

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
  <thead nz-thead>
  <tr>
    <th nz-th><span>姓名</span></th>
    <th nz-th><span>年齡</span></th>
    <th nz-th><span>地址</span></th>
    <th nz-th><span>操做</span></th>
  </tr>
  </thead>
  <tbody nz-tbody>
  <tr nz-tbody-tr *ngFor="let data of nzTable.data">
    <td nz-td>
      <a>{{data.name}}</a>
    </td>
    <td nz-td>{{data.age}}</td>
    <td nz-td>{{data.address}}</td>
    <td nz-td>
            <span>
              <a href="#">編輯</a>
              <span nz-table-divider></span>
              <a href="#">刪除</a>
              <span nz-table-divider></span>
              <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                  更多操做 <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu>
                  <li nz-menu-item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">預覽</a>
                  </li>
                  <li nz-menu-item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">打印</a>
                  </li>
                </ul>
              </nz-dropdown>
            </span>
    </td>
  </tr>
  </tbody>
</nz-table>

3、編輯ts文件

import {Component, OnInit} from '@angular/core';
import { Http } from '@angular/http';/* 添加Http請求模塊 */

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  /* 變量定義 */
  data:object[] = [];/* 定義列表數據變量 */

  /* 構造方法，作依賴注入 */
  constructor(private _httpService: Http) {

  }

  /* 加載完事件，作初始化 */
  ngOnInit() {
    this._httpService.get('http://localhost:3003/news').subscribe(values => {
      console.log(values);
      this.data = values.json();
  });
  }

}

4、效果預覽