From a4568aea6005a45778afd868f29c922709a2a9a0 Mon Sep 17 00:00:00 2001 From: Kun-Neng Date: Sun, 2 May 2021 23:49:53 +0800 Subject: Update /learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning, zh-TW (#721) 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 * [todo list beginning] complete the last part translation * 修正三處語意不通順的部分 L88, L191, L211 --- .../angular_todo_list_beginning/index.html | 56 +++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'files') 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 41926c7687..0c8d171bfa 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 @@ -85,7 +85,7 @@ tags: }

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

+對於這個待辦列表來說，一個 item 物件擁有說明與是否已完成兩個屬性。

將邏輯加入至 AppComponent

@@ -136,18 +136,18 @@ export class AppComponent {

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

+本指引接下來的步驟會展示如何為您的列表加入篩選功能，但您仍可以使用篩選器來顯示這個列表預設的所有項目。

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

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

-

Add HTML to the AppComponent template

+

將 HTML 加入至 AppComponent 的範本

-

To see the list of items in the browser, replace the contents of app.component.html with the following HTML:

+

為了在瀏覽器中看到列表中的項目，置換 app.component.html 內容為以下 HTML ：

<div class="main">
   <h1>My To Do List</h1>
@@ -158,11 +158,11 @@ export class AppComponent {
   </ul>
 </div>
-

The <li> contains an *ngFor, a built-in Angular directive that iterates over the items in the items array. -For each item, *ngFor creates a new <li>. -The double curly braces that contain item.description instructs Angular to populate each <li> with the text of each item's description.

+

這個 <li> 包含了一個 Angular 的內建指令 *ngFor ，它可以迭代 items 陣列中的所有項目。 +對於每一個項目， *ngFor 建立了一個新的 <li> 。 +此處包住 item.description 的雙花括號指示 Angular 以每個項目的說明文字來填充每個 <li> 。

-

In the browser, you should see the list of items as follows:

+

在瀏覽器中，您應該可以看到如下的項目列表：

 My To Do List
@@ -174,11 +174,11 @@ What would you like to do today?
 * laugh
-

Add items to the list

+

將項目加入至列表

-

A to-do list needs a way to add items.

+

一個待辦列表理所當然地需要有添加項目的方法。

-

In app.component.ts, add the following method to the class:

+

在 app.component.ts 中，加入以下方法至此類別中：

addItem(description) {
   this.allItems.unshift({
@@ -187,13 +187,13 @@ What would you like to do today?
   });
 }
-

The addItem() method takes an item that the user provides and adds it to the array when the user clicks the Add button. -The addItem() method uses the array method unshift() to add a new item to the beginning of the array and the top of the list. -You could alternatively use push(), which would add the new item to the end of the array and the bottom of the list.

+

這個 addItem() 方法接受一個使用者提供的項目，並在使用者點擊 Add 按鈕時將之加入至陣列中。 +這個 addItem() 方法使用了陣列方法的 unshift() 來添加一個新的項目到陣列的開頭位置與列表的頂端。 +又或者，您也可以使用 push() 來添加一個新的項目到陣列的最後位置與列表的尾端。

-

To use the addItem() method, edit the HTML in the AppComponent template.

+

為了能使用 addItem() 方法，編輯 AppComponent 範本中的 HTML 。

-

In app.component.html, replace the <h2> with the following:

+

在 app.component.html 中置換 <h2> 為

<label for="addItemInput">What would you like to do today?</label>
 
@@ -207,14 +207,14 @@ You could alternatively use push(), which would add the new item to
 
 <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
-

When the user types a new item in the <input> and presses Enter, the addItem() method adds the value to the items array. -Pressing the Enter key also resets the value of <input> to an empty string. -Alternatively, the user can click the Add button which calls the sameaddItem() method.

+

當使用者在 <input> 中輸入一個新的項目名稱並按下 Enter 鍵後， addItem() 方法隨即加入這筆資料至 items 陣列中。 +按下 Enter 鍵的同時也會重設 <input> 的值為空字串。 +或者，使用者也能透過點擊 Add 按鈕來呼叫相同的 addItem() 方法。

-

Summary

+

小結

-

By now you should have your basic list of to-dos displaying in your browser. That's great progress! Of course, we have a lot more to do. In the next article we will look at adding some styling to our application.

+

目前為止，您應該已經在您的瀏覽器中顯示待辦事項列表。這是很大的進展！當然，我們仍有很多事要做。在下一篇文章，我們將研究在應用程式中加入一些樣式。

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
@@ -271,12 +271,12 @@ Alternatively, the user can click the Add button which calls th
  • Angular
    • -- cgit v1.2.3-54-g00ecf