Merge pull request #128 from todoubaba/displaying-data
Polish displaying-data.jade
This commit is contained in:
Rex
GitHub
commit
8d84f0377d
|
|
@ -12,11 +12,11 @@ block includes
|
|||
You'll display the list of hero names and
|
||||
conditionally show a message below the list.
|
||||
|
||||
本章中，我们将创建一个英雄列表组件。我们将显示英雄名字的列表，当选中一位英雄时，就在列表下方显示一条消息。
|
||||
本章中，我们将创建一个英雄列表组件。我们将显示英雄名字的列表，并在列表下方显示一条消息。
|
||||
|
||||
The final UI looks like this:
|
||||
|
||||
最终的UI是这样的：
|
||||
最终的用户界面是这样的：
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/final.png" alt="Final UI")
|
||||
|
|
@ -48,8 +48,8 @@ figure.image-display
|
|||
is to bind the property name through interpolation.
|
||||
With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
|
||||
|
||||
要显示组件的属性，最简单的方式就是通过插值表达式(Interpolation)来绑定属性名。
|
||||
要使用插值表达式，就把属性名包裹在双重花括号里放进视图模板，如`{{myHero}}`。
|
||||
要显示组件的属性，最简单的方式就是通过插值表达式（interpolation）来绑定属性名。
|
||||
要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如`{{myHero}}`。
|
||||
|
||||
To build an illustrative example, start by creating a new project folder called <ngio-ex path="displaying-data"></ngio-ex>
|
||||
and following the steps in [QuickStart](../quickstart.html).
|
||||
|
|
@ -71,7 +71,7 @@ figure.image-display
|
|||
:marked
|
||||
You added two properties to the formerly empty component: `title` and `myHero`.
|
||||
|
||||
再把两个属性`title`和`myHero`添加到之前空白的组件中。
|
||||
再把两个属性`title`和`myHero`添加到之前空白的组件中。
|
||||
|
||||
The revised template displays the two component properties using double curly brace
|
||||
interpolation:
|
||||
|
|
@ -88,22 +88,22 @@ figure.image-display
|
|||
quote (`'`)—allows you to compose a string over several lines, which makes the
|
||||
HTML more readable.
|
||||
|
||||
模板是包在反引号(<code>\`</code>)中的一个多行字符串。
|
||||
反引号(<code>\`</code>) —— 注意，不是单引号(') —— 有很多好用的特性。
|
||||
我们在这里用到的是它把一个字符串写在多行上的能力，这样我们的HTML模板就会更容易阅读。
|
||||
模板是包在ECMAScript 2015反引号（<code>\`</code>）中的一个多行字符串。
|
||||
反引号（<code>\`</code>） —— 注意，不是单引号(') —— 允许把一个字符串写在多行上，
|
||||
使HTML模板更容易阅读。
|
||||
|
||||
:marked
|
||||
Angular automatically pulls the value of the `title` and `myHero` properties from the component and
|
||||
inserts those values into the browser. Angular updates the display
|
||||
when these properties change.
|
||||
|
||||
Angular会自动从组件中提取`title`和`myHero`属性的值，并且把这些值插入浏览器中。一旦这些属性发生变化，Angular就会自动刷新显示。
|
||||
Angular自动从组件中提取`title`和`myHero`属性的值，并且把这些值插入浏览器中。当这些属性发生变化时，Angular就会自动刷新显示。
|
||||
.l-sub-section
|
||||
:marked
|
||||
More precisely, the redisplay occurs after some kind of asynchronous event related to
|
||||
the view, such as a keystroke, a timer completion, or a response to an HTTP request.
|
||||
|
||||
严格来说，“重新显示”是在某些与视图有关的异步事件之后发生的，比如：按键、定时器或收到异步`XHR`响应。
|
||||
严格来说，“重新显示”是在某些与视图有关的异步事件之后发生的，比如：按键、定时器完成或对HTTP请求的响应。
|
||||
|
||||
:marked
|
||||
Notice that you don't call **new** to create an instance of the `AppComponent` class.
|
||||
|
|
@ -130,7 +130,7 @@ figure.image-display
|
|||
|
||||
Now run the app. It should display the title and hero name:
|
||||
|
||||
试一下本应用。它应该显示出标题和英雄名。
|
||||
试一下本应用。它应该显示出标题和英雄名。
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero")
|
||||
|
|
@ -139,12 +139,12 @@ figure.image-display
|
|||
:marked
|
||||
The next few sections review some of the coding choices in the app.
|
||||
|
||||
我们来回顾一下以前所做的决定，看看还有哪些其它选择。
|
||||
我们来回顾一下以前所做的决定，看看还有哪些其它选择。
|
||||
|
||||
:marked
|
||||
## Template inline or template file?
|
||||
|
||||
## 内联(inline)模板还是模板文件？
|
||||
## 内联（inline）模板还是模板文件？
|
||||
|
||||
You can store your component's template in one of two places.
|
||||
You can define it *inline* using the `template` property, or you can define
|
||||
|
|
@ -152,16 +152,16 @@ figure.image-display
|
|||
the component metadata using the `@Component` !{_decorator}'s `templateUrl` property.
|
||||
|
||||
我们有两种地方可以用来存放组件模板。
|
||||
我们可以使用`template`属性把它定义为 *内联* 的，就像这里所做的一样。
|
||||
或者，可以把模板定义在一个独立的HTML文件中，并且通过在`@Component`装饰器中的`templateUrl`属性把它链接到组件。
|
||||
我们可以使用`template`属性把它定义为 *内联* 的，或者把模板定义在一个独立的HTML文件中，
|
||||
并通过在`@Component`装饰器中的`templateUrl`属性把它链接到组件。
|
||||
|
||||
The choice between inline and separate HTML is a matter of taste,
|
||||
circumstances, and organization policy.
|
||||
Here the app uses inline HTML because the template is small and the demo
|
||||
is simpler without the additional HTML file.
|
||||
|
||||
到底选择内联HTML还是独立HTML取决于：个人喜好、具体状况和组织级策略。
|
||||
这里我们选择内联HTML，是因为模板很小，而且这个演示很简单，没有别的HTML文件。
|
||||
到底选择内联HTML还是独立HTML取决于个人喜好、具体状况和组织级策略。
|
||||
这里我们选择内联HTML，是因为模板很小，而且没有额外的HTML文件显得这个演示简单些。
|
||||
|
||||
In either style, the template data bindings have the same access to the component's properties.
|
||||
|
||||
|
|
@ -171,11 +171,11 @@ figure.image-display
|
|||
:marked
|
||||
## Constructor or variable initialization?
|
||||
|
||||
## 初始化：使用构造函数还是变量？
|
||||
## 使用构造函数还是变量初始化？
|
||||
|
||||
Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
|
||||
|
||||
虽然这个例子使用了变量赋值的方式初始化组件的属性。你可以使用构造函数来声明和初始化属性。
|
||||
虽然这个例子使用了变量赋值的方式初始化组件，你还可以使用构造函数来声明和初始化属性。
|
||||
|
||||
+makeExcerpt('app/app-ctor.component.ts', 'class')
|
||||
|
||||
|
|
@ -192,7 +192,7 @@ figure.image-display
|
|||
|
||||
To display a list of heroes, begin by adding !{_an} !{_array} of hero names to the component and redefine `myHero` to be the first name in the !{_array}.
|
||||
|
||||
我们准备显示一个英雄列表。先往组件中添加一个英雄名字数组，然后把`myHero`重定义为数组中的第一个名字。
|
||||
要显示一个英雄列表，先向组件中添加一个英雄名字数组，然后把`myHero`重定义为数组中的第一个名字。
|
||||
|
||||
+makeExcerpt('app/app.component.2.ts', 'class')
|
||||
|
||||
|
|
@ -200,7 +200,7 @@ figure.image-display
|
|||
Now use the Angular `ngFor` directive in the template to display
|
||||
each item in the `heroes` list.
|
||||
|
||||
现在，我们在模板中使用Angular的`ngFor`“重复器”指令来显示`heroes`列表中的每一个条目。
|
||||
现在，我们在模板中使用Angular的`ngFor`指令来显示`heroes`列表中的每一项。
|
||||
|
||||
+makeExcerpt('app/app.component.2.ts', 'template')
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ figure.image-display
|
|||
It marks that `<li>` element (and its children) as the "repeater template":
|
||||
|
||||
这个界面使用了由`<ul>`和`<li>`标签组成的无序列表。`<li>`元素里的`*ngFor`是Angular的“迭代”指令。
|
||||
它将`<li>`元素和它的子级标记为“迭代模板”：
|
||||
它将`<li>`元素和它的子级标记为“迭代模板”：
|
||||
|
||||
+makeExcerpt('app/app.component.2.ts ()', 'li', '')
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ figure.image-display
|
|||
Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
|
||||
For more information, see the [Template Syntax](./template-syntax.html#ngFor) page.
|
||||
|
||||
不要忘记`*ngFor`中的前导星号(\*)。它是语法中不可或缺的一部分。
|
||||
不要忘记`*ngFor`中的前导星号（\*）。它是语法中不可或缺的一部分。
|
||||
要了解关于此语法和`ngFor`的更多知识，请参见[模板语法](./template-syntax.html#ngFor)一章。
|
||||
:marked
|
||||
Notice the `hero` in the `ngFor` double-quoted instruction;
|
||||
|
|
@ -227,22 +227,23 @@ figure.image-display
|
|||
more about template input variables in the [microsyntax](./template-syntax.html#ngForMicrosyntax) section of
|
||||
the [Template Syntax](./template-syntax.html) page.
|
||||
|
||||
注意看`ngFor`双引号表达式中的`hero`。
|
||||
它是一个[模板输入变量](./template-syntax.html#ngForMicrosyntax)(译注：即ngFor模板中从外界输入的变量)。
|
||||
注意看`ngFor`双引号表达式中的`hero`，它是一个模板输入变量。
|
||||
更多模板输入变量的信息，见[模板语法](./template-syntax.html)中的
|
||||
[微语法（microsyntax）](./template-syntax.html#ngForMicrosyntax)。
|
||||
|
||||
Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
|
||||
to the item (the hero) in the current iteration. Angular uses that variable as the
|
||||
context for the interpolation in the double curly braces.
|
||||
|
||||
Angular为列表中的每一个条目复制一个`<li>`元素。在每个迭代中，都会把`hero`变量设置为当前条目(此英雄)。
|
||||
Angular为列表中的每个条目复制一个`<li>`元素，在每个迭代中，都会把`hero`变量设置为当前条目（英雄）。
|
||||
Angular把`hero`变量作为双花括号插值表达式的上下文。
|
||||
.l-sub-section
|
||||
:marked
|
||||
In this case, `ngFor` is displaying !{_an} !{_array}, but `ngFor` can
|
||||
repeat items for any [iterable](!{_iterableUrl}) object.
|
||||
|
||||
本例中，`ngFor`显示“数组”，
|
||||
但`ngFor`可以为任何[可迭代Iterable](!{_iterableUrl})对象重复渲染条目。
|
||||
本例中，`ngFor`用于显示一个“数组”，
|
||||
但`ngFor`可以为任何[可迭代的（iterable）](!{_iterableUrl})对象重复渲染条目。
|
||||
|
||||
:marked
|
||||
Now the heroes appear in an unordered list.
|
||||
|
|
@ -262,17 +263,17 @@ figure.image-display
|
|||
In a simple demo, however, it's fine.
|
||||
|
||||
应用代码直接在组件内部直接定义了数据。
|
||||
作为演示还可以，但它显然不是最佳实践。
|
||||
作为演示还可以，但它显然不是最佳实践。
|
||||
|
||||
At the moment, the binding is to !{_an} !{_array} of strings.
|
||||
In real applications, most bindings are to more specialized objects.
|
||||
|
||||
现在，我们绑定到了一个字符串数组。在真实的应用中偶尔这么做。但绝大多数时候，我们会绑定一些对象数组上。
|
||||
现在，我们绑定到了一个字符串数组。在真实的应用中，大多时候我们会绑定到一个对象数组。
|
||||
|
||||
To convert this binding to use specialized objects, turn the !{_array}
|
||||
of hero names into !{_an} !{_array} of `Hero` objects. For that you'll need a `Hero` class.
|
||||
|
||||
要将此绑定转换成使用特殊对象，把英雄名字放到`Hero`对象的数组。但首先得有一个`Hero`类。
|
||||
要将此绑定转换成使用对象，需要把这个英雄名字数组变成`Hero`对象数组。但首先得有一个`Hero`类。
|
||||
|
||||
Create a new file in the `!{_appDir}` folder called <ngio-ex path="hero.ts"></ngio-ex> with the following code:
|
||||
|
||||
|
|
@ -284,12 +285,12 @@ block hero-class
|
|||
:marked
|
||||
You've defined a class with a constructor and two properties: `id` and `name`.
|
||||
|
||||
我们这样就定义了一个带有构造函数和两个属性：`id`和`name`的类。
|
||||
我们定义了一个类，具有一个构造函数和两个属性：`id`和`name`。
|
||||
|
||||
It might not look like the class has properties, but it does.
|
||||
The declaration of the constructor parameters takes advantage of a TypeScript shortcut.
|
||||
|
||||
它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。
|
||||
它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。
|
||||
|
||||
Consider the first parameter:
|
||||
|
||||
|
|
@ -304,11 +305,11 @@ block hero-class
|
|||
|
||||
* Declares a constructor parameter and its type
|
||||
|
||||
* 定义了一个构造函数参数及其类型
|
||||
* 声明了一个构造函数参数及其类型
|
||||
|
||||
* Declares a public property of the same name
|
||||
|
||||
* 定义了一个同名的公开属性
|
||||
* 声明了一个同名的公共属性
|
||||
|
||||
* Initializes that property with the corresponding argument when we "new" an instance of the class
|
||||
|
||||
|
|
@ -323,7 +324,7 @@ block hero-class
|
|||
The `heroes` property in the component can now use the `Hero` class to return !{_an} !{_array}
|
||||
of `Hero` objects:
|
||||
|
||||
我们让组件中的`heroes`属性返回这些`Hero`对象的数组。
|
||||
我们让组件中的`heroes`属性返回一个`Hero`对象的数组。
|
||||
|
||||
+makeExcerpt('app/app.component.3.ts', 'heroes')
|
||||
|
||||
|
|
@ -351,17 +352,17 @@ block hero-class
|
|||
|
||||
Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
|
||||
|
||||
有时候，应用只需要在特定情况下显示视图或视图的一部分。
|
||||
有时候，应用需要只在特定情况下显示视图或视图的一部分。
|
||||
|
||||
Let's change the example to display a message if there are more than three heroes.
|
||||
|
||||
让我们来修改这个例子，让它显示在多于3位英雄的情况下，显示一条消息。
|
||||
让我们来修改这个例子，如果多于三位英雄，显示一条消息。
|
||||
|
||||
The Angular `ngIf` directive inserts or removes an element based on a !{_boolean} condition.
|
||||
To see it in action, add the following paragraph at the bottom of the template:
|
||||
|
||||
Angular的`NgIf`指令会基于条件的真假来显示或移除一个元素。
|
||||
我们来亲自动手试一下，把下列语句加到模板的底部：
|
||||
Angular的`ngIf`指令会根据一个布尔条件来显示或移除一个元素。
|
||||
我们来亲自动手试一下，把下列语句加到模板的底部：
|
||||
|
||||
+makeExcerpt('app/app.component.ts', 'message')
|
||||
|
||||
|
|
@ -370,8 +371,8 @@ block hero-class
|
|||
Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
|
||||
Read more about `ngIf` and `*` in the [ngIf section](./template-syntax.html#ngIf) of the [Template Syntax](./template-syntax.html) page.
|
||||
|
||||
不要忘了`*ngIf`中的前导星号(\*)。它是本语法中不可或缺的一部分。
|
||||
要学习关于此语法和`NgIf`的更多知识，请参见[模板语法](./template-syntax.html#ngIf)一章。
|
||||
不要忘了`*ngIf`中的前导星号（\*）。它是本语法中不可或缺的一部分。
|
||||
更多`ngIf`和`* `的内容，见[模板语法](./template-syntax.html)中的[ngIf](./template-syntax.html#ngIf)。
|
||||
|
||||
:marked
|
||||
The template expression inside the double quotes,
|
||||
|
|
@ -382,23 +383,23 @@ block hero-class
|
|||
see the [template expressions](./template-syntax.html#template-expressions) section of the
|
||||
[Template Syntax](./template-syntax.html) page.
|
||||
|
||||
双引号中的[模板表达式](./template-syntax.html#template-expressions)，看起来很像JavaScript，但它也_只是_“像”JavaScript。
|
||||
当组件中的英雄列表有三个以上的条目时，Angular把这些语句添加到DOM中，于是消息显示了出来。
|
||||
如果少于或等于三个条目，Angular会移除这些语句，于是没有消息显示。
|
||||
双引号中的模板表达式`*ngIf="heros.length > 3"`，外观和行为很象!{_Lang}。
|
||||
当组件中的英雄列表有三个以上的条目时，Angular把这个段落添加到DOM中，于是消息显示了出来。
|
||||
更多信息，见[模板语法](./template-syntax.html)中的[模板表达式](./template-syntax.html#template-expressions)。
|
||||
.alert.is-helpful
|
||||
:marked
|
||||
Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
|
||||
big chunks of HTML with many data bindings.
|
||||
|
||||
Angular并不是在显示和隐藏这条消息，它是在从DOM中添加和移除这些元素。
|
||||
在这个范例中，它们(在性能上)几乎等价。但是如果我们想要有条件的包含或排除“一大堆”带着很多数据绑定的HTML，性能上的区别就会更加显著。
|
||||
Angular并不是在显示和隐藏这条消息，它是在从DOM中添加和移除这个段落元素。
|
||||
这会提高性能，特别是在一些大的项目中有条件地包含或排除一大堆带着很多数据绑定的HTML时。
|
||||
|
||||
:marked
|
||||
Try it out. Because the !{_array} has four items, the message should appear.
|
||||
Go back into <ngio-ex path="app.component.ts"></ngio-ex> and delete or comment out one of the elements from the hero !{_array}.
|
||||
The browser should refresh automatically and the message should disappear.
|
||||
|
||||
试一下。因为数组中有四个条目，所以消息应该显示出来。
|
||||
试一下。因为这个数组中有四个条目，所以消息应该显示出来。
|
||||
回到`app.component.ts`，并从英雄数组中删除或注释掉一个元素。
|
||||
浏览器应该自动刷新，而消息应该会消失。
|
||||
.l-main-section
|
||||
|
|
@ -409,23 +410,23 @@ block hero-class
|
|||
|
||||
Now you know how to use:
|
||||
|
||||
现在我们知道了如何：
|
||||
现在我们知道了如何使用以下内容：
|
||||
|
||||
- **Interpolation** with double curly braces to display a component property
|
||||
|
||||
- 用带有双花括号的**插值表达式Interpolation**来显示组件的一个属性
|
||||
- 用带有双花括号的**插值表达式（interpolation）**来显示一个组件属性
|
||||
|
||||
- **ngFor** to display !{_an} !{_array} of items
|
||||
|
||||
- 用**ngFor**来显示条目列表
|
||||
- 用**ngFor**来显示数组
|
||||
|
||||
- A !{_Lang} class to shape the **model data** for our component and display properties of that model
|
||||
|
||||
- 用一个!{_Lang}类来为我们的组件描述**数据模型**并显示模型的各个属性。
|
||||
- 用一个!{_Lang}类来为我们的组件描述**数据模型**并显示模型的属性。
|
||||
|
||||
- **ngIf** to conditionally display a chunk of HTML based on a boolean expression
|
||||
|
||||
- **ngIf**用来根据一个布尔表达式有条件的显示一段HTML
|
||||
- **ngIf**用来根据一个布尔表达式有条件地显示一段HTML
|
||||
|
||||
Here's the final code:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue