From 5b4edd004b3a96910c6cca2c9c8a60df4ea49661 Mon Sep 17 00:00:00 2001 From: Kun-Neng Date: Sat, 1 May 2021 19:01:47 +0800 Subject: Update /learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning, zh-TW (#717) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [todo list beginning] complete preface translation * [todo list beginning] complete the first part translation * 修正破折號 移除原文破折號，改用中文破折號。 * 處理中文破折號撰寫格式 移除中文破折號前後空格。 * [todo list beginning] complete the second part translation --- .../angular_todo_list_beginning/index.html | 47 +++++++++++----------- 1 file changed, 23 insertions(+), 24 deletions(-) (limited to 'files/zh-tw') diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html index 04a10e8d2e..41926c7687 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html @@ -75,22 +75,22 @@ tags: 您使用這些裝飾子來指定哪些特定屬性允許資料輸入至一個元件或由一個元件輸出。 欲使用 @Output() ，您要在一個元件中引發一個事件，如此一來，其他的元件就會知道有可使用的資料。

-

Define Item

+

定義項目

-

In the app directory, create a new file named item.ts with the following contents:

+

在 app 目錄中新建一個名為 item.ts 的檔案，包含以下內容：

export interface Item {
   description: string;
   done: boolean;
 }
-

The Item interface creates an item object model so that your application understands what an item is. -For this to-do list, an item is an object that has a description and can be done.

+

這個 Item interface 用來建立一個 item 物件模型，讓您的應用程式能理解 item 到底是什麼。 +對於這個待辦列表，一個 item 就代表一個擁有說明與是否已完成等兩個屬性的物件。

-

Add logic to AppComponent

+

將邏輯加入至 AppComponent

-

Now that your application knows what an item is, you can give it some items by adding them to the TypeScript file, app.component.ts. -In app.component.ts, replace the contents with the following:

+

現在，您的應用程式知道了 item 為何物，您可以在 TypeScript 檔案 app.component.ts 中加入更多項目。 +在 app.component.ts 中置換內容如下：

 import { Component } from '@angular/core';
@@ -122,29 +122,28 @@ export class AppComponent {
 
 }
-

The first line is a JavaScript import that imports Angular. -The @Component() decorator specifies metadata about the AppComponent. -The default metadata properties are as follows:

+

第一行是以 JavaScript import 來匯入 Angular。 +這個 @Component() 裝飾子指定關於 AppComponent 的元資料（metadata）。 +預設元資料的屬性如下：

-

The filter property is of type union, which means filter could have the value of all, active, or done. -With the union type, if you make a typo in the value you assign to the filter property, TypeScript lets you know so that you can catch the bug early. -This guide shows you how to add filtering in a later step, but you can also use a filter to show the default list of all the items.

+

這個 filter 屬性為 union 型態，表示 filter 的值可能為 all 、 active ，或者 done 。 +有了 union 型態，若您賦予 filter 屬性錯誤的值， TypeScript 會馬上讓您知道來及早除錯。 +本指引接下來的步驟會展示如何為您的列表加入過濾功能，但您仍可以使用過濾器來顯示這個列表預設的所有項目。

-

The allItems array contains the to-do items and whether they are done. -The first item, eat, has a done value of true.

+

這個 allItems 陣列包含所有待辦項目，其中也包含項目是否已完成的 done 屬性。 +例如，第一個項目 eat 擁有值為 true 的 done 屬性。

-

The getter, get items(), retrieves the items from the allItems array if the filter is equal to all. -Otherwise, get items() returns the done items or the outstanding items depending on how the user filters the view. -The getter also establishes the name of the array as items, which you'll use in the next section.

+

當 filter 等於 all 時，這個 getter get items() 會由 allItems 陣列中獲取所有的項目。 +否則， get items() 會回傳 done 的項目或是取決於使用者如何過濾的未完成項目。 +此 getter 也會建立名為 items 的陣列名稱，這部分您將會在下個章節使用到。

Add HTML to the AppComponent template

-- cgit v1.2.3-54-g00ecf