Question

我想显示从添加屏幕到基于ngModel的查看屏幕的值，我尝试但未成功。我是Angular 5的新手。如果我在“添加”屏幕中添加了应该在“视图”屏幕表中显示的值。

//this is my App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BodyComponent } from './body/body.component';
import { FooterComponent } from './footer/footer.component';
import { UomComponent } from './uom/uom.component';
import { AddComponent } from './uom/add/add.component';
import { DetailsComponent } from './uom/details/details.component';
import { DeleteComponent } from './uom/delete/delete.component';

  const appRoutes: Routes = [
   {path: 'viewUom', component: UomComponent},
  {path: 'addUom', component: AddComponent},
  {path: 'detailsUom', component: DetailsComponent},
  {path: 'deleteUom', component: DeleteComponent},

  ];
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BodyComponent,
    FooterComponent,
    UomComponent,
    AddComponent,
    DetailsComponent,
    DeleteComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
     RouterModule.forRoot(appRoutes) // if required {enableTracing: true}
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}



// This is my Add.component.ts 
import {NgForm} from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  itemId = '1111';
  constructor() { }

  ngOnInit() {
  }

}

/* New Buttons */
.button-band .buttons {position:absolute;top:1px;right:0;float:right;width:auto;margin-right:10px;margin-top:.1%;}
.buttons1 .main-btns {position: relative;display: inline-block;width: auto;}
.main-btns a {display: inline-block;padding: 1px 10px;border: 1px solid #3D81A9;border-radius: 5px;font-family: Arial, Helvetica, sans-serif;background: #014D82;background: linear-gradient(#0272A5, #014D82);background: -moz-linear-gradient(#0272A5, #014D82);background: -webkit-linear-gradient(#0272A5, #014D82);text-decoration: none;color: white;width: auto;max-width: 150px;height: 22px;line-height:14px;margin: 0;margin-left: 3px;text-align:center;vertical-align: middle;}
.main-btns a:focus {outline: 1px dotted #000;}
.main-btns a.but-disbl {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);cursor:default;}
.main-btns a.but-disbl:hover {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);}
.main-btns a span {display:inline-block;width:auto;max-width:100px;font-size:11px;white-space:nowrap;overflow:hidden;margin:2px 0;}
.main-btns a:hover {background:#02689b;color:#fff;}
/* New Buttons END*/
.buttons a {display: inline-block;padding: 1px 10px;border: 1px solid #3D81A9;border-radius: 5px;font-family: Arial, Helvetica, sans-serif;background: #014D82;background: linear-gradient(#0272A5, #014D82);background: -moz-linear-gradient(#0272A5, #014D82);background: -webkit-linear-gradient(#0272A5, #014D82);text-decoration: none;color: white;width: auto;max-width: 150px;height: 22px;line-height:14px;margin: 0;margin-left: 3px;vertical-align: middle;}
.buttons a:focus, .buttons-input a:focus {outline: 1px dotted #000;}
.but-menu, .excel-menu {position:absolute;display:none;width: 60px;height: auto;top:20px;left:5px;z-index:100;background: #edeef0;border: 1px solid #c2c2c2;border-bottom:none;}
.excel-menu { width:74px; }
.excel-menu1 { width:53px; }
.but-menu a, .excel-menu a {position:relative;display:inline-block;width:100%;text-decoration:none;height:auto;background: #edeef0;color: #006699;cursor:hand;border:none;border-bottom: 1px solid #c2c2c2;border-radius:0;font: normal 11px arial;padding:2px;margin:0;}
.but-menu a:hover, .excel-menu a:hover {background: #0178b2;display: inline-block;margin: 0;padding: 2px;cursor:hand;border:none;border-bottom: 1px solid #c2c2c2;color: #ffffff;}
.buttons a.but-disbl, .buttons-input a.but-disbl{color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);cursor:default;}
.buttons a.but-disbl:hover {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);}
.buttons a span, .buttons-input a span{display:inline-block;width:auto;max-width:100px;font-size:11px;white-space:nowrap;overflow:hidden;margin:2px 0;}
.buttons a:hover, .buttons-input a:hover{background:#02689b;color:#fff;}
.buttons a.expand {display: inline-block;padding:0 10px;cursor:pointer;border-radius:50%;}
.buttons a.expand span {display:inline-block;width: 10px;height:13px;white-space:nowrap;overflow:hidden;line-height:auto;margin:2px 0;background: url('assets/images/accordionexpand.png') center top no-repeat;}
.buttons a.collapse {display: none;padding:0 10px;cursor:pointer;border-radius:50%;}
.buttons a.collapse span {display:inline-block;width: 10px;height:13px;white-space:nowrap;overflow:hidden;line-height:auto;margin:2px 0;background: url('assets/images/accordioncollapse.png') center top no-repeat;}
.buttons a.expand:focus, .buttons a.collapse:focus {outline:1px dotted #000;}
.button-gen a {display: inline-block;padding: 1px 5px;border: 1px solid #3D81A9;border-radius: 5px;font-family: Arial, Helvetica, sans-serif;background: #014D82;background: linear-gradient(#0272A5, #014D82);background: -moz-linear-gradient(#0272A5, #014D82);background: -webkit-linear-gradient(#0272A5, #014D82);text-decoration: none;color: white;width: auto;max-width: 150px;height: 20px;line-height:12px;margin: 0;margin-left: 3px;vertical-align: middle;}
.button-gen a:focus {outline: 1px dotted #000;}
.button-gen a.but-disbl {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);cursor:default;}
.button-gen a.but-disbl:hover {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);}
.button-gen a span {display:inline-block;width:auto;max-width:100px;font-size:11px;white-space:nowrap;overflow:hidden;margin:2px 0;}
.button-gen a:hover {background:#02689b;color:#fff;}
.gen-fx-btn-field {position: relative;display:inline-block;width: auto;}
.gen-fx-btn-field .gen-fx-field {position: relative;display: inline-block;width: 100%;padding-right: 37px;}
.gen-fx-btn-field .gen-fx-btn {position: absolute;display:inline-block;top: 0;right: 0px;}
.gen-fx-btn a{display: block;width:35px;border: 1px solid #3D81A9;border-radius: 5px;font-family: Arial, Helvetica, sans-serif;background: #014D82;background: linear-gradient(#0272A5, #014D82);background: -moz-linear-gradient(#0272A5, #014D82);background: -webkit-linear-gradient(#0272A5, #014D82);text-decoration: none;text-align:center;color: white;height: 20px;line-height:12px;vertical-align: middle;padding:2px 0}
.gen-fx-btn a span {display:inline-block;width:auto;font-size:11px;white-space:nowrap;overflow:hidden;}
.gen-fx-btn .gen-fx-btn-dsbld {border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);color:#ddd;cursor:default;}
.gen-fx-btn-dsbld span {display:inline-block;width:auto;font-size:11px;white-space:nowrap;overflow:hidden;}
.button-gen-fx a {display: inline-block;padding: 0px 5px;border: 1px solid #3D81A9;border-radius: 5px;font-family: Arial, Helvetica, sans-serif;background: #014D82;background: linear-gradient(#0272A5, #014D82);background: -moz-linear-gradient(#0272A5, #014D82);background: -webkit-linear-gradient(#0272A5, #014D82);text-decoration: none;color: white;width: auto;max-width: 150px;height: 20px;line-height:12px;margin: 0;margin-left: 3px;vertical-align: middle;}
.button-gen-fx a:focus {outline: 1px dotted #000;}
.button-gen-fx a.but-disbl {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);cursor:default;}
.button-gen-fx a.but-disbl:hover {color:#dddddd;border:1px solid #8fb0c1;background:#8ebdd7;background:linear-gradient(#8ebdd7, #87b3d0);background:-moz-linear-gradient(#8ebdd7, #87b3d0);background:-webkit-linear-gradient(#8ebdd7, #87b3d0);}
.button-gen-fx a span {display:inline-block;width:auto;max-width:100px;font-size:11px;white-space:nowrap;overflow:hidden;margin:2px 0;}
.button-gen-fx a:hover {background:#02689b;color:#fff;}

<!-- this is main screen -->
<div class="button-band"><span class="header-m">&nbsp;Search Criteria</span><div class="buttons"><a routerLink="/viewUom" routerLinkActive ="active" title="View"><span>View</span></a><a routerLink="/addUom" title="Add"><span>Add</span></a><a routerLink="/detailsUom" title="Details"><span>Details</span></a><a routerLink="/deleteUom" title="Delete"><span>Delete</span></a></div></div>
 <div class="viewUomClass">
 <router-outlet></router-outlet>
 </div>
<!--This is my View Screen-->
<table style="width:100%;"> 
 <thead>
 <tr height="25">
 <th width="25%">Item ID</th>
 <th width="25%">Item Description</th>
 <th width="25%">Item classification</th>
 <th>Item Sub-Classification</th>
 </tr>
 </thead>
 <tbody>
 <tr height="25">
 <td>{{itemId}}</td>
 <td><!-- {{itemDescriptionVal}} --></td>
 <td><!-- {{classificationVal}} --></td>
 <td><!-- {{subClassificationVal}} --></td>
 </tr>
 </tbody>
 </table>
 
 <!--This is my Add Screen-->
 <form>
<table style="width:100%;">
<tr height="25">
<td align="right" width="45%"><div class="label-man"><span>* Item ID</span></div></td>
 
<td><input type="text" style="width:300px" name ="itemId" id="FstTex" [(ngModel)] = "itemId"></td>
</tr>
<tr height="25">
<td align="right"><div class="label-man"><span>Item Description</span></div></td>
<td><input type="text" style="width:300px" id="itemDescriptionVal"></td>
 
</tr>
<tr height="25">
<td align="right"><div class="label-man"><span>* Item Classification</span></div></td>
<td><input type="text" style="width:300px" id="classificationVal"></td>
 
</tr>
<tr height="25">
<td align="right"><div class="label-man"><span>* Item Sub-Classification</span></div></td>
<td><input type="text" style="width:300px" id="subClassificationVal"/></td>
 
</tr>
</table>
</form>

Answer 1

尝试此操作将打印所有添加的记录。

HTML代码

<input type="text" [(ngModel)] = "itemInput.itemId"></td>
<input type="text" [(ngModel)] = "itemInput.desc"></td>
<input type="text" [(ngModel)] = "itemInput.classification"></td>
<button (click)="save()"></button>
<table> 
    <thead>
        <tr height="25">
            <th width="25%">Item ID</th>
            <th width="25%">Item Description</th>
            <th width="25%">Item classification</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of itemList ">
        <td>{{item.itemId}}</td>
        <td>{{item.desc}}</td>
        <td>{{item.classification}}</td>
    </tr>
    </tbody>
 </table>

组件代码

export class AddComponent {
  itemInput:any = {};
  itemList = [];
  constructor() { }

  save() {
      itemList.push(itemInput);
      itemInput = {};
  }
}

如何在我的应用程序中将ngModel用作全局变量？

1 个答案: