From badf927f370d2d85b9bf1a31771328f2e82508b0 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Wed, 5 Sep 2018 09:46:21 +0800 Subject: [PATCH] =?UTF-8?q?docs(API):=20=E7=BF=BB=E8=AF=91=E5=AE=8C?= =?UTF-8?q?=E4=BA=86=20NgSelectOption?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/translations/cn/api-plan.md | 2 +- .../select_control_value_accessor.ts | 38 ++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/aio/content/translations/cn/api-plan.md b/aio/content/translations/cn/api-plan.md index 2fd6c8d3fd..973db45ed2 100644 --- a/aio/content/translations/cn/api-plan.md +++ b/aio/content/translations/cn/api-plan.md @@ -93,7 +93,7 @@ [x] | core/PipeTransform | 0.18 [x] | core/SimpleChange | 0.18 [x] | core/SimpleChanges | 0.18 -[ ] | forms/NgSelectOption | 0.17 +[x] | forms/NgSelectOption | 0.17 [ ] | common/PercentPipe | 0.17 [ ] | forms/ValidatorFn | 0.17 [ ] | http/RequestOptionsArgs | 0.17 diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts index 1597ae8872..67a19c891a 100644 --- a/packages/forms/src/directives/select_control_value_accessor.ts +++ b/packages/forms/src/directives/select_control_value_accessor.ts @@ -31,43 +31,71 @@ function _extractId(valueString: string): string { * * Writes values and listens to changes on a select element. * + * 在 `select` 元素上写入值并监听其变更。 + * * Used by `NgModel`, `FormControlDirective`, and `FormControlName` * to keep the view synced with the `FormControl` model. * + * 由 `NgModel`、`FormControlDirective` 和 `FormControlName` 使用， + * 以保持视图与 `FormControl` 模型的同步。 + * * If you have imported the `FormsModule` or the `ReactiveFormsModule`, this * value accessor will be active on any select control that has a form directive. You do * **not** need to add a special selector to activate it. * + * 如果你已经导入了 `FormsModule` 或 `ReactiveFormsModule`，该"值访问器"（`ValueAccessor`）将会自动在任何具有表单指令的 `select` 元素上激活。 + * 你**不用**添加特殊的选择器来激活它。 + * * ### How to use select controls with form directives * + * ### 如何与表单指令一起使用 `select` 控件 + * * To use a select in a template-driven form, simply add an `ngModel` and a `name` * attribute to the main `` 标签上即可。 + * * If your option values are simple strings, you can bind to the normal `value` property * on the option. If your option values happen to be objects (and you'd like to save the * selection in your form as an object), use `ngValue` instead: * + * 如果 `option` 的值是字符串，那么你可以在 `option` 中绑定到标准的 `value` 属性。 + * 如果是对象（你可能要把该选择结果作为对象存入表单中），请用 `ngValue` 代替： + * * {@example forms/ts/selectControl/select_control_example.ts region='Component'} * * In reactive forms, you'll also want to add your form directive (`formControlName` or * `formControl`) on the main `` 标签上。 + * 像以前的例子中一样，你可以把候选项绑定到 `option` 的 `value` 或 `ngValue` 属性上。 + * * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'} * * ### Caveat: Option selection * + * ### 警告：`option` 选择结果 + * * Angular uses object identity to select option. It's possible for the identities of items * to change while the data does not. This can happen, for example, if the items are produced * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the * second response will produce objects with different identities. * + * Angular 使用对象标识作为选项。条目标识可能在其实质性数据没有变化的情况发生变化。比如，如果这些条目是通过 RPC 的方式从服务端取到的，当重新执行 RPC 时，就算数据没有变化，第二个响应也会生成一些具有不同对象标识的对象。 + * * To customize the default option comparison algorithm, `` 支持一个名叫 `compareWith` 的输入。 + * `compareWith` 接受一个**函数**，它具有两个参数：`option1` 和 `option2`。 + * 如果指定了 `compareWith`，则 Angular 会根据该函数的返回值来选取一个选项。 + * * #### Syntax * + * #### 语法 + * * ``` *