使用 Angular 渲染只读数据

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

介绍

在开发应用程序表单或带有网格的仪表板等内容时，您可能希望以只读模式向最终用户呈现一些数据。您可以通过两种方式做到这一点：

使用 HTML 标签控件
使用 Angular 的readonly属性

HTML 标签控件默认是只读的，但在表单和网格控件中看起来并不引人注目。因此，最好使用 Angular 的开箱即用 (OOB)只读属性。在本指南中，我们将通过真实场景应用只读属性。我们将创建一个小表单，让用户可以在任何网站（例如 Pluralsight.com）上创建技术事件。

要完成本指南，您必须具备以下条件：

节点-12.17.0
Angular CLI——9.0.2
Visual Studio Code - 1.45.1

入门

创建 Angular 项目

执行以下命令创建一个 Angular 项目。

ng new readonly-demo

在 Visual Studio Code 中打开生成的应用程序

单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
在文件对话框中，导航到生成应用程序的文件夹。
在此文件夹中，您应该看到一个名为readonly-demo 的文件夹。选择此文件夹并在文件对话框中单击“打开” 。

设置项目

下一步是安装 Twitter Bootstrap 和 jQuery，并在项目中引用它们，这样您就可以使用一些表单样式来使表单看起来不错。

转到命令提示符并运行以下命令：

cd 只读-演示

运行以下命令安装jquery：

npm 我 jquery

运行以下命令安装 Bootstrap：

npm 我 bootstrap

在 Visual Studio Code 中，打开文件angular.json。
在src/style.css之前的样式数组中添加以下行：

“node_modules/bootstrap/dist/css/bootstrap.min.css”，

在脚本数组中添加以下行：

“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”

打开文件src > app > app.module.ts，删除现有内容，并添加以下代码：

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

现在项目已全部准备好开始开发表单。

开发新的事件形式

在命令提示符中运行以下命令：

ng 生成组件创建事件

在 Visual Studio Code 中，打开文件src > app > create-event > create-event.component.ts，删除文件内容，并添加以下代码：

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

@Component({
  selector: 'app-create-event',
  templateUrl: './create-event.component.html',
  styleUrls: ['./create-event.component.css']
})
export class CreateEventComponent implements OnInit {
  newEvent:any = {
    baseUrl: 'https://www.events.pluralsight.com/angular/'
  }

  constructor() { }

  ngOnInit(): void {
  }

  saveEvent(newEvent)
  {
    console.log(newEvent);
  }

  cancel()
  {

  }
}
    

在 Visual Studio Code 中，打开文件src > app > create-event > create-event.component.html，删除文件内容，并添加以下代码：

      <h1>New Event</h1>
<hr>
<div class="col-md-6">
  <form #newEventForm="ngForm" (ngSubmit)="saveEvent(newEventForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="eventName">Event Name:</label>
      <input [(ngModel)]="newEvent.name" name="name" id="name" type="text" class="form-control" placeholder="Name of your event..." />
    </div>
    <div class="form-group">
      <label for="eventDate">Event Date:</label>
      <input [(ngModel)]="newEvent.date" name="date" id="eventDate" type="text" class="form-control" placeholder="format (mm/dd/yyyy)..." />
    </div>
    <div class="form-group">
      <label for="eventTime">Event Time:</label>
      <input [(ngModel)]="newEvent.time" name="time" id="eventTime" type="text" class="form-control" placeholder="start and end time..." />
    </div>
    <div class="form-group">
      <label for="eventPrice">Event Price:</label>
      <input [(ngModel)]="newEvent.price" name="price" id="eventPrice" type="text" type="number" class="form-control" placeholder="event price..." />
    </div>
    <div class="form-group" style="overflow: hidden;">
      <label style="display: block;" for="onlineUrl">Online Url:</label>
      <div style="float: left; width: 49%;">
        <input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="Base Url..."/>
      </div>
      <div style="float:right; width: 49%;">
        <input [(ngModel)]="newEvent.onlineUrl" name="onlineUrl" id="onlineUrl" type="text" class="form-control" placeholder="Event Url..." />
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" [disabled]="newEventForm.invalid" class="btn btn-default" (click)="cancel()">Cancel</button>
  </form>
</div>
    

在 Visual Studio Code 中，打开文件src > app > app.component.html，删除所有现有代码，然后添加以下代码：

      <app-create-event></app-create-event>

启动开发服务器

在命令提示符中运行以下命令，以监视模式启动 Angular 开发服务器：ng serve
如果提示分享 Angular CLI 使用数据，请按“N”键表示不分享。
打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
注意“在线 URL”字段。第一个文本框是可写的，它应该呈现为只读，这样用户就无法编辑事件的基本 URL。所以让我们这样做。

将基本 URL 设为只读

在 Visual Studio Code 中，打开文件src > app > create-event > create-event.component.html。
转到第 24 行，并在元素末尾添加以下代码：[readonly]="true"

最终代码如下所示：

<input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="基本网址..." [readonly]="true"/>

返回浏览器中的应用程序，并观察基本 URL 字段现在为只读。用户无法对其进行任何更改。

结论

恭喜！您已了解：

如何在 Angular 中向最终用户呈现只读数据
如何使用 Angular 的属性绑定语法来绑定输入元素的 HTML 属性

欲了解更多信息，请参考以下资源：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文