6-1

src/app/pages/page-home/page-item/page-item.component.html

 <div class="item-box" style="display: flex;height: 100%;">
-  
+
   <div style="flex:0 0 140px;">
     <nz-card class="block" style="width:200px">
       <button nz-button nzBlock nzType="primary">Add</button>
@@ -14,40 +14,30 @@
     <div class="block">
       <!-- datalist -->
       <nz-card style="width:100%;">
-
-        <div class="item" style="height:120px;;width: 100%; display:flex">
-          <div style="flex: 1 0 0; margin-right:6px " >
-            <nz-descriptions nzBordered nzSize="small">
-              <nz-descriptions-item nzTitle=" 编号">0000000</nz-descriptions-item>
-              <nz-descriptions-item nzTitle="货号">00000000</nz-descriptions-item>
-              <nz-descriptions-item nzTitle="装箱">4800ps</nz-descriptions-item>
-              <nz-descriptions-item nzTitle="品名" [nzSpan]="3" >11111111</nz-descriptions-item>
-              <nz-descriptions-item nzTitle="分类" [nzSpan]="2">玩具/童车/益智玩具/卡牌</nz-descriptions-item>
-              <nz-descriptions-item nzTitle="热门">是</nz-descriptions-item>
-              
-              <nz-descriptions-item nzTitle="标签"  [nzSpan]="2">
-                <nz-tag [nzColor]="'magenta'">magenta</nz-tag>
-      <nz-tag [nzColor]="'red'">red</nz-tag>
-      <nz-tag [nzColor]="'volcano'">volcano</nz-tag>
-      <nz-tag [nzColor]="'orange'">orange</nz-tag>
-              </nz-descriptions-item>
-              
-              <nz-descriptions-item nzTitle="置顶">
-                是
-              </nz-descriptions-item>
-              <nz-descriptions-item nzTitle="描述">
-                000000000000000000
-              </nz-descriptions-item>
-            </nz-descriptions>
-          </div>
-
-
-          <div style="flex:0 0 220px;border-radius: 4px; border:solid 1px #ccc ">
-            <img src="assets/turtle.png" style="width:100%;height:100%;" />
+        <div>
+          <div *ngFor="let i of listdata" class="item" style="height:120px;;width: 100%; display:flex;border-bottom: solid 1px #ccc;padding-bottom: 8px;">
+            <div style="flex: 1 0 0; margin-right:6px " >
+              <div nz-row>
+                <div nz-col nzSpan="8">L00000000</div>
+                <div nz-col nzSpan="16">玩具/童车/益智玩具/卡牌</div>
+              </div>
+              <div nz-row>
+                <div nz-col nzSpan="8">{{i.no}}</div>
+                <div nz-col nzSpan="16">{{i.name}}</div>
+              </div>
+              <div nz-row>
+                <div nz-col>{{i.qty}} PCS</div>
+                <div nz-col>分类</div>
+              </div>
+            </div>
+            <div style="flex:0 0 220px;border-radius: 4px; border:solid 1px #ccc ">
+              <img src="assets/turtle.png" style="width:100%;height:100%;" />
+            </div>
           </div>
         </div>
 
 
+
       </nz-card>
     </div>
   </div>

src/app/pages/page-home/page-item/page-item.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Item } from 'src/app/_model/Item';
+import { ItemService } from 'src/app/_service/item.service';
 
 @Component({
   templateUrl: './page-item.component.html',
@@ -6,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageItemComponent implements OnInit {
 
-  constructor() { }
+  listdata:Item []
+  constructor(private _item:ItemService) { }
 
   ngOnInit(): void {
+    this._item.Get({}).then(docs=>{
+      this.listdata=docs;
+    })
   }
 
 }