如何获得输入以使用角度4管道显示和编辑货币

时间:2017-11-17 16:54:59

标签: angular angular2-pipe angular2-ngmodel

我的目标是设置一个输入字段,允许用户将数字编辑为货币。例如。用户看到“$ 1,000”,他们可以输入“0”,编辑框显示“$ 10,000”。结果数据模型是10000。

<input type="text" name="Data" [ngModel]="Data | currency:'USD':true:'4.0-0'" (ngModelChange)="Data=$event" >

以上显示在编辑框'$ 1,000'中,但是当我在输入框中编辑值时,该值不再是数字1000,而是字符串“$ 1,000”。这意味着我的数据模型来自

{ myCost: 1000 } 

成为

{ myCost: "$1,000" }

有关正确方法的任何想法吗?看起来我需要创建一个新的函数来将货币转换回数字。这是可能的,但似乎有更好的方法。

1 个答案:

答案 0 :(得分:0)

您可以在组件类中处理ngModelChange AndroidNetworking.get(Constants.GET_MY_REVIEWS_ENDPOINT) .addHeaders("x-access-token", token) .setTag("Get My Reviews") .setPriority(Priority.HIGH) .build() .getAsJSONObject(new JSONObjectRequestListener() { @Override public void onResponse(JSONObject response) { Log.d(TAG, "FAN Lib My Reviews Response is: \t" + response.toString()); try { JSONObject object = response.getJSONObject(""); success = (boolean) object.get("success"); JSONArray reviewsArray = object.getJSONArray("reviews"); for (int i = 0; i < reviewsArray.length(); i++){ JSONObject body = reviewsArray.getJSONObject(i); String revId = body.getString("_id"); String revTime = body.getString("createdAt"); String revFor = body.getString("for"); String revBy = body.getString("by"); String revMsgBody = body.getString("body"); // TODO: 11/17/2017 Get Reviewer Details //Reviews reviews = new Reviews("", "Demo User", revMsgBody, revTime); Reviews reviews = new Reviews(); reviews.setReviewerName("Abhiram Labhani"); reviews.setReviewerImg(""); reviews.setReviewBody(revMsgBody); reviews.setReviewTime(revTime); itemsList.add(reviews); adapter = new ReviewsAdapter(getActivity(), itemsList); my_reviews_recyclerView.setAdapter(adapter); if (adapter.getItemCount() > 0){ dummy.setVisibility(View.GONE); Log.d(TAG, "Adapter size is:\t" + adapter.getItemCount()); } else { dummy.setVisibility(View.VISIBLE); Log.d(TAG, "Adapter size is:\t" + adapter.getItemCount()); } } } catch (JSONException e) { e.printStackTrace(); } } @Override public void onError(ANError anError) { } });

在component.ts
(ngModelChange)="onInputValueChange($event)"