[英]TypeScript : Object.assign Array and parsing data to web page
I understand that using object.assign in typescript is 我了解在typescript中使用object.assign是
Object.assign({},a , b) . Object.assign({},a,b)。 target...source.
目标...源。 However, i am trying to understand how can i fetch data from file to another.
但是,我试图了解如何从文件获取数据到另一个文件。
For an instance , my main.ts file , i declared an array .. 例如,我的main.ts文件声明了一个数组。
..
template:`<testing [config]="_headerConfig"></testing> `
..
private _headerConfig = {
buttons:[
icon: "md-alarm", //this can be change depending on own preffered icon logo
type : "btn"
]
};
i created a second ts.file . 我创建了第二个ts.file。 Lets call it testing.ts for now.
现在将其称为testing.ts。 this file will communicate with main.ts.
该文件将与main.ts通信。 The parent ts(main) file will parse data for icons and type to testing.ts .
父ts(main)文件将解析图标的数据,然后键入testing.ts。
..
..
@Component
selector: "testing";
..
..
..
//i am not sure if i do need to declare this as empty array object.
//first i declared an an empty array
public button_message : any =[{}];
//setting default values
private _defaultConfig: any = {
leftButton : [{icon : "Default",
path : "Default"}
],
};
//this is where i used object.assign I want
let config = this.config.leftButton;
console.log ("object 1 is developer input" , config); //this will display the inputs from main.ts
let defaultConfig = this._defaultConfig.leftButton; //this will display the input from the _defaultConfig
console.log ("object2 is default input", defaultConfig)
let finalConfig = Object.assign({}, config, defaultConfig);
console.log("This is Object Assing log" , finalConfig)
I tried countless ways to figure this part which is If there is input icon inside testing.ts , it will display as md-alarm . 我尝试了无数种方法来找出这部分,如果在testing.ts中有输入图标,它将显示为md-alarm。 else it will run as the _defaultConfig which icon is default.
否则它将作为_defaultConfig运行,该图标是默认图标。
The thing i am not sure how to get the data inside the array . 我不确定如何在数组中获取数据。 i tried using index pointer but it is returning as a whole.
我尝试使用索引指针,但它整体返回。
in my html page , i tried using string interpolation to bind the data from my second.ts file. 在我的html页面中,我尝试使用字符串插值来绑定来自second.ts文件的数据。 but it always gives me error.
但它总是给我错误。 for an example.
举个例子
i want to bind data input icon by developer to "md-alarm", for an example , this is my second.html which linked to second.ts 我想将开发人员的数据输入图标绑定到“ md-alarm”,例如,这是我的second.html,它链接到second.ts
<button class="logo-btn">
<name="{{button_message.icon}}">
</>
</button>
No msg was parsed . 没有消息被解析。 Any help would be greatly appreciated.
任何帮助将不胜感激。
Let's see if I understood you correctly. 让我们看看我是否理解正确。 I would assign the default values already in the parent component, eg:'
我会在父组件中分配默认值,例如:'
private _headerConfig = {
buttons: [
{
leftButton: {
icon: "md-1-default"
type: "btn"
},
},
{
rightButton: {
icon: "md-2-default"
type: "btn"
},
},
]
};
then you have this, which passes your _headerConfig
to child 那么你有这个,它将
_headerConfig
传递给孩子
<testing [config]="_headerConfig"></testing>
in your child component you need the following: 在您的子组件中,您需要以下内容:
@Input() config;
well you capture the values in OnInit
: 好了,您可以捕获
OnInit
的值:
ngOnInit() {
console.log(JSON.stringify(this.config));
}
that would output: 将会输出:
{"buttons":[{"leftButton":{"icon":"md-2-default","type":"btn"}},{"rightButton":{"icon":"md-2-default","type":"btn"}}]}
Apparently you want to take user input and change these default values. 显然,您希望接受用户输入并更改这些默认值。 For that you can use eg
为此,您可以使用例如
(ngModelChange)="updateValue(your parameter)"
Not knowing actually HOW you are doing that, I'll just assing leftButton with a new custom value manually: 我实际上不知道您是如何做到的,我只是用一个新的自定义值手动设置leftButton:
this._headerConfig.buttons[0] = { leftButton: { icon: 'custom', type: 'custom' } }
Then you do just what you want with the values. 然后,您可以根据需要执行所需的操作。 You can follow the changes in your child view if you like:
如果愿意,可以在子视图中关注更改:
<div>{{config | json}}</div>
So the above change would JSON stringified then look like this: 因此,以上更改将JSON字符串化,如下所示:
{"buttons":[{"leftButton":{"icon":"custom","type":"custom"}},{"rightButton":{"icon":"md-1-default","type":"btn"}}]}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.