[成都|内门弟子]CSS-何俊|2021年02月03日的日报-技能树.IT修真院

发表于： 2021-02-03 23:59:20

1 1075

今天完成的事情：

学习创建angular项目

创建新的工作区和一个初始应用

ng new angular-tour-of-heroes

启动应用程序

cd angular-tour-of-heroes

ng serve --open

更改应用标题

打开组件的类文件（ app.component.ts ），修改titl 属性的值

title = 'Tour of Heros';

打开组文件的模板文件 app.component.html修改

<h1>{{title}}</h1>

添加应用样式

将写好的样式添加到src/styles.css文件

创建英雄列表组件

ng generate component heroes

在app文件创建一个hero文件夹，包含4个子文件

heroes.component.css

heroes.component.html

heroes.component.spec.ts

heroes.component.ts

添加 hero 属性

在heroes.component.ts文件的export中添加

hero = 'Windstorm';

显示英雄

在heroes.component.html文件中添加

显示heroes文件夹的视图

在app.component.html文件中添加

<app-heroes></app-heroes>

创建 Hero 类

app文件夹中为Hero类创建一个文件 hero.ts，并添加 id 和 name 属性

export interface Hero {
    id: number;
    name: string;
  }

hero属性从字符串改成了对象，原本页面出错，

进行修改，显示 hero 对象

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

使用 UppercasePipe 进行格式化

<h2>{{hero.name | uppercase}} Details</h2>

可以将hero.name大写化

编辑英雄名字，并双向绑定

    <div><span>id: </span>{{selectedHero.id}}</div>
    <div>
      <label>name:
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
      </label>
    </div>
  </div>

显示列表：

创建模拟的英雄数据

app文件夹中创建一个名叫 mock-heroes.ts 的文件，添加属性

import { Hero } from './hero';
export const HEROES: Hero[] = [
  { id: 11, name: 'Dr Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

在heroes.component.ts中导入模拟的 HEROES

import { HEROES } from '../mock-heroes';

使用*ngFor列表，并且绑定单击事件

在heroes.component.html中添加*ngFor，click属性

<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>

暂无问题

明天的计划学习添加服务，导航。从服务端获取数据，并且自己重新练习写创建angular的语法

返回列表

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年02月03日 的日报 中品

评论

分享到

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年02月03日的日报中品