Mixing
Angular <button (click)= not responding
When I click on the button in nothing happens, no errors. I have the following HTML code:
<body>
<mat-card>
<mat-card-content>
<span class="mat-display">To see buy/sell data for Apple stock click Go</span>
</mat-card-content>
<mat-card-actions>
<button (click)="getstock()" mat-raised-button color="primary">Go</button>
</mat-card-actions>
</mat-card>
Here is the component code:
export class HomeComponent {
constructor(private api: ApiService){
}
getstock(){
this.api.getBuySellData()
}
}
and finally the api.service.ts code
export class ApiService {
constructor(private http: HttpClient) { }
stock: StocksComponent
list: any
stockURL = 'https://localhost:44310/api/stock'
stocksURL = 'https://localhost:44310/api/stocks'
/** POST: */
postStock (stocks) {
this.http.post(this.stocksURL, stocks).subscribe(res => {
console.log(res)
})
}
getBuySellData() {
return this.http.get(this.stockURL)
}
getBuySellDatas() {
return this.http.get(this.stocksURL)
}
}
I cannot find the error.
angular asked Jan 2 at 23:18
Jam66125Jam66125
596
add a comment |
When I click on the button in nothing happens, no errors. I have the following HTML code:
<body>
<mat-card>
<mat-card-content>
<span class="mat-display">To see buy/sell data for Apple stock click Go</span>
</mat-card-content>
<mat-card-actions>
<button (click)="getstock()" mat-raised-button color="primary">Go</button>
</mat-card-actions>
</mat-card>
Here is the component code:
export class HomeComponent {
constructor(private api: ApiService){
}
getstock(){
this.api.getBuySellData()
}
}
and finally the api.service.ts code
export class ApiService {
constructor(private http: HttpClient) { }
stock: StocksComponent
list: any
stockURL = 'https://localhost:44310/api/stock'
stocksURL = 'https://localhost:44310/api/stocks'
/** POST: */
postStock (stocks) {
this.http.post(this.stocksURL, stocks).subscribe(res => {
console.log(res)
})
}
getBuySellData() {
return this.http.get(this.stockURL)
}
getBuySellDatas() {
return this.http.get(this.stocksURL)
}
}
I cannot find the error.
angular asked Jan 2 at 23:18
Jam66125Jam66125
596
3
SincegetBuySellDatareturns an Observable, you need to subscribe to it. Otherwise, nothing happens.
– R. Richards
Jan 2 at 23:25
add a comment |
When I click on the button in nothing happens, no errors. I have the following HTML code:
<body>
<mat-card>
<mat-card-content>
<span class="mat-display">To see buy/sell data for Apple stock click Go</span>
</mat-card-content>
<mat-card-actions>
<button (click)="getstock()" mat-raised-button color="primary">Go</button>
</mat-card-actions>
</mat-card>
Here is the component code:
export class HomeComponent {
constructor(private api: ApiService){
}
getstock(){
this.api.getBuySellData()
}
}
and finally the api.service.ts code
export class ApiService {
constructor(private http: HttpClient) { }
stock: StocksComponent
list: any
stockURL = 'https://localhost:44310/api/stock'
stocksURL = 'https://localhost:44310/api/stocks'
/** POST: */
postStock (stocks) {
this.http.post(this.stocksURL, stocks).subscribe(res => {
console.log(res)
})
}
getBuySellData() {
return this.http.get(this.stockURL)
}
getBuySellDatas() {
return this.http.get(this.stocksURL)
}
}
I cannot find the error.
angular asked Jan 2 at 23:18
Jam66125Jam66125
596
When I click on the button in nothing happens, no errors. I have the following HTML code:
<body>
<mat-card>
<mat-card-content>
<span class="mat-display">To see buy/sell data for Apple stock click Go</span>
</mat-card-content>
<mat-card-actions>
<button (click)="getstock()" mat-raised-button color="primary">Go</button>
</mat-card-actions>
</mat-card>
Here is the component code:
export class HomeComponent {
constructor(private api: ApiService){
}
getstock(){
this.api.getBuySellData()
}
}
and finally the api.service.ts code
export class ApiService {
constructor(private http: HttpClient) { }
stock: StocksComponent
list: any
stockURL = 'https://localhost:44310/api/stock'
stocksURL = 'https://localhost:44310/api/stocks'
/** POST: */
postStock (stocks) {
this.http.post(this.stocksURL, stocks).subscribe(res => {
console.log(res)
})
}
getBuySellData() {
return this.http.get(this.stockURL)
}
getBuySellDatas() {
return this.http.get(this.stocksURL)
}
}
I cannot find the error.
angular angular asked Jan 2 at 23:18
Jam66125Jam66125
596
asked Jan 2 at 23:18
Jam66125Jam66125
596
asked Jan 2 at 23:18
Jam66125Jam66125
596
asked Jan 2 at 23:18
Jam66125Jam66125
596
asked Jan 2 at 23:18
Jam66125Jam66125
596
596
3
SincegetBuySellDatareturns an Observable, you need to subscribe to it. Otherwise, nothing happens.
– R. Richards
Jan 2 at 23:25
add a comment |
3
SincegetBuySellDatareturns an Observable, you need to subscribe to it. Otherwise, nothing happens.
– R. Richards
Jan 2 at 23:25
3
3
Since
getBuySellData returns an Observable, you need to subscribe to it. Otherwise, nothing happens.– R. Richards
Jan 2 at 23:25
Since
getBuySellData returns an Observable, you need to subscribe to it. Otherwise, nothing happens.– R. Richards
Jan 2 at 23:25
add a comment |
1 Answer
1
active
oldest
votes
You are not subscribing to the Observable returned from this.http.get() in your getBuySellData() function. Since you want access to it in your HomeComponent, you will want to assign a variable to hold the Observable and then subscribe to it within that component to get the data.
When you subscribe to the Observable the HTTP Request will fire.
The HTTP Request will not be completed unless you subscribe to it like you had done for the POST request in your other method.
It should look similar, like so:
export class HomeComponent {
constructor(private api: ApiService){}
Observable<any> $buySellData;
getstock() {
this.$buySellData = this.api.getBuySellData();
this.$buySellData.subscribe((data: any) => {
// Use the `data` variable to produce output for the user
});
}
}
The reason it is beneficial to store the Observable instead of subscribing directly to the return value of the ApiService call is that you can use Angular's async pipe to subscribe to the Observable in your template. That would look like this:
<div>{{$buySellData | async}}</div>
That way, Angular will take care of unsubscribing for you, and you won't have to store the resolved value(s) of the Observable in another variable.
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014442%2fangular-button-click-not-responding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are not subscribing to the Observable returned from this.http.get() in your getBuySellData() function. Since you want access to it in your HomeComponent, you will want to assign a variable to hold the Observable and then subscribe to it within that component to get the data.
When you subscribe to the Observable the HTTP Request will fire.
The HTTP Request will not be completed unless you subscribe to it like you had done for the POST request in your other method.
It should look similar, like so:
export class HomeComponent {
constructor(private api: ApiService){}
Observable<any> $buySellData;
getstock() {
this.$buySellData = this.api.getBuySellData();
this.$buySellData.subscribe((data: any) => {
// Use the `data` variable to produce output for the user
});
}
}
The reason it is beneficial to store the Observable instead of subscribing directly to the return value of the ApiService call is that you can use Angular's async pipe to subscribe to the Observable in your template. That would look like this:
<div>{{$buySellData | async}}</div>
That way, Angular will take care of unsubscribing for you, and you won't have to store the resolved value(s) of the Observable in another variable.
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
add a comment |
You are not subscribing to the Observable returned from this.http.get() in your getBuySellData() function. Since you want access to it in your HomeComponent, you will want to assign a variable to hold the Observable and then subscribe to it within that component to get the data.
When you subscribe to the Observable the HTTP Request will fire.
The HTTP Request will not be completed unless you subscribe to it like you had done for the POST request in your other method.
It should look similar, like so:
export class HomeComponent {
constructor(private api: ApiService){}
Observable<any> $buySellData;
getstock() {
this.$buySellData = this.api.getBuySellData();
this.$buySellData.subscribe((data: any) => {
// Use the `data` variable to produce output for the user
});
}
}
The reason it is beneficial to store the Observable instead of subscribing directly to the return value of the ApiService call is that you can use Angular's async pipe to subscribe to the Observable in your template. That would look like this:
<div>{{$buySellData | async}}</div>
That way, Angular will take care of unsubscribing for you, and you won't have to store the resolved value(s) of the Observable in another variable.
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
add a comment |
You are not subscribing to the Observable returned from this.http.get() in your getBuySellData() function. Since you want access to it in your HomeComponent, you will want to assign a variable to hold the Observable and then subscribe to it within that component to get the data.
When you subscribe to the Observable the HTTP Request will fire.
The HTTP Request will not be completed unless you subscribe to it like you had done for the POST request in your other method.
It should look similar, like so:
export class HomeComponent {
constructor(private api: ApiService){}
Observable<any> $buySellData;
getstock() {
this.$buySellData = this.api.getBuySellData();
this.$buySellData.subscribe((data: any) => {
// Use the `data` variable to produce output for the user
});
}
}
The reason it is beneficial to store the Observable instead of subscribing directly to the return value of the ApiService call is that you can use Angular's async pipe to subscribe to the Observable in your template. That would look like this:
<div>{{$buySellData | async}}</div>
That way, Angular will take care of unsubscribing for you, and you won't have to store the resolved value(s) of the Observable in another variable.
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
You are not subscribing to the Observable returned from this.http.get() in your getBuySellData() function. Since you want access to it in your HomeComponent, you will want to assign a variable to hold the Observable and then subscribe to it within that component to get the data.
When you subscribe to the Observable the HTTP Request will fire.
The HTTP Request will not be completed unless you subscribe to it like you had done for the POST request in your other method.
It should look similar, like so:
export class HomeComponent {
constructor(private api: ApiService){}
Observable<any> $buySellData;
getstock() {
this.$buySellData = this.api.getBuySellData();
this.$buySellData.subscribe((data: any) => {
// Use the `data` variable to produce output for the user
});
}
}
The reason it is beneficial to store the Observable instead of subscribing directly to the return value of the ApiService call is that you can use Angular's async pipe to subscribe to the Observable in your template. That would look like this:
<div>{{$buySellData | async}}</div>
That way, Angular will take care of unsubscribing for you, and you won't have to store the resolved value(s) of the Observable in another variable.
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
answered Jan 2 at 23:34
Tim KleinTim Klein
1,300714
1,300714
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
add a comment |
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
1
1
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
Thanks Tim. It totally works. Much better on what I started with. I appreciate your expertise.
– Jam66125
Jan 3 at 0:29
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014442%2fangular-button-click-not-responding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Since
getBuySellDatareturns an Observable, you need to subscribe to it. Otherwise, nothing happens.– R. Richards
Jan 2 at 23:25