如何在我的应用程序中使用ngModel作为全局?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (48)

我想显示基于ngModel的添加屏幕到查看屏幕的值,我试过但没有成功。

//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>
提问于
用户回答回答于

试试这个它会打印所有添加的记录。

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 = {};
  }
}

热门问答

关于web表情包集成?

最爱开车啦互联网的敏感者
推荐
表情使用方式有两种方式: 1)是使用 TIMFaceElem 中的 index,标识表情的索引,比如 Android 和 iOS 两端都有同一套表情图,索引2为笑脸,index=2 就表示笑脸,两端发送和接收都显示同一张索引表情图片即可。 2 ) 是使用 TIMFaceElem ...... 展开详请

如何将本地的.json格式的文件部署到服务器上, 通过url请求?

使用 CDS-Mask 做数据合作,怎么确保双方都不能反推对方的 ID?

用户2134289

腾讯科技 · 高级工程师 (已认证)

推荐
您好,两种方案可以解决您的需求 1)如果您这边ID不需要在业务上使用,将ID进行加星脱敏即可,加星后的所有数据字符将变为*,无法还原; 2)如果您这边ID在业务上需要使用,也就是ID在处理后必须保持唯一性,那么需要采用腾讯数港算法解决该问题,数港算法目前灰度中,如需要申请,烦请通...... 展开详请

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

腾讯云通信SDK接入问题?

人生的旅途辣鸡前端
推荐
您好,为了进一步优化管理通知,Google在发布android 8 时对通知做了修改优化,出现了通知渠道功能。具体可以参考以下文章: https://www.jianshu.com/p/8baa62c5bfc2 如有其它异常,可联系QQ3268519604 感谢您对云通信的支持与...... 展开详请

急急急!!核验图片验证码填写到接入备案企业侧备案系统中,在哪操作啊?

无聊至极互联网重度用户
推荐
你反馈的上海备案的APP核验验证码吗?如果是的话,提交订单的时候直接写验证码就可以的。 在补充材料的下面 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券