Typescript encounters ERROR TS1128: Expecting a declaration or statement

Having trouble with a TypeScript error in my game-details.component.ts file that I've been trying to fix for a couple of hours. It's showing up at line 26, column 54 and everything seems correct to me.

Interestingly, when I press CTRL + S in my game-detail.component, Webpack compiles successfully and my program runs without any issues. Can someone shed some light on why it works this way?

Below is the code snippet:

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';

import { GameService } from '../../game.service';
import { UserComment } from '../../comment.model';

@Component({
  selector: 'app-game-detail',
  templateUrl: './game-detail.component.html',
  styleUrls: ['./game-detail.component.css'],
  providers: [GameService]
})
export class GameDetailComponent implements OnInit {

  gameKey: string;
  gameDetail;

  constructor(private route: ActivatedRoute, private location: Location, private gameService: GameService) { }

  ngOnInit() {
    this.route.params.forEach((urlParameters) => {
      this.gameKey = urlParameters['id'];
    });
    this.gameService.getGameByKey(this.gameKey).subscribe(dataLastEmittedFromObserver => {
       this.gameDetail = dataLastEmittedFromObserver;);
      }

      addComment(com: string) {
      const newComment: UserComment = new UserComment(com);
      this.gameDetail.comments.push(newComment);
      this.gameService.updateComments(this.gameDetail);
      // this.toggleDisplay();
    }
}

Answer №1

Upon reviewing your code, it appears that there is a small issue within the ngOnInit() method where you have misplaced some parentheses. To correct this, consider the following adjustment:

ngOnInit() {
  this.route.params.forEach((urlParameters) => {
            this.gameKey = urlParameters['id'];
        });      
  this.gameService.getGameByKey(this.gameKey)
  .subscribe(dataLastEmittedFromObserver => {
            this.gameDetail = dataLastEmittedFromObserver;
        });
}

Answer №2

Your action didn't include closing the parentheses properly, or you may have misplaced them. It's important to ensure correctness based on your intended outcome.

Answer №3

Oops! Looks like your brackets are out of place.

Here's a suggestion:

Try adjusting the position of your brackets in the following code snippet:
this.gameService.getGameByKey(this.gameKey).subscribe(dataLastEmittedFromObserver => {
    this.gameDetail = dataLastEmittedFromObserver;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular export interface - it's like two worlds colliding

I am relatively new to coding and recently inherited a project from a former colleague who has since moved on. There seems to be an issue in the code that they left behind which is causing unexpected behavior. Below are 4 interfaces.ts files: 1. interfac ...

Switch between MMM dd yyy and dd/mm/yyyy date formats easily

I have implemented a native material-ui date picker which currently displays dates in the dd/mm/yyy format. However, I need to customize the display format to show dates like this: Jun 18 2012 12:00AM. This specific date format is essential for consistency ...

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

Invoke a functional component when a button is clicked in a React application

I have a functional component that includes a button. My goal is to trigger another functional component when this button is clicked. Upon clicking the Submit button, the Preview button appears. When the user clicks on the preview button, it should call t ...

How can I set up a KeyboardEvent listener in JavaScript?

My attempt to use @keydown resulted in an error: Type 'Event | KeyboardEvent' is not assignable to type 'KeyboardEvent'. Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, c ...

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

I am facing an issue with generating a thumburl for uploaded video files. After dynamically creating an input file and uploading local video files, I am able to retrieve the name and size of the file along with other information as shown in the screenshot ...

Generate a list of items in typescript, and then import them into a react component dynamically

I have a variable that stores key/value pairs of names and components in a TypeScript file. // icons.tsx import { BirdIcon, CatIcon } from 'components/Icons'; interface IconMap { [key: string]: string | undefined; } export const Icons: IconM ...

An issue has occurred while attempting to differentiate '[object Object]'. Please note that only arrays and iterable objects are permitted

myComponent.component.ts ngOnInit() { this.getData.getAllData().subscribe( response => { console.log(response); this.dataArray = response; }, () => console.log('there was an error') ); } myservi ...

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Here is the layout of my array object: const foo = {"data":[ [1,'asdf'], [2,'lorem'], [3,'impsum'], [4,'test'], [5,'omg'], ]} I am looking to replicate each array four times and increment the first item ...

React conditional statement within a map function embedded in a JSX element

Below is the function I have created to generate tabbed items: function ConstructTabs(props) { const tabs = props.tabs; const makeTabs = tabs.map((tab, index) => { <React.Fragment> <input className="input-tabs" id ...

Having trouble with my React private route, can't seem to get it to function properly

I'm fairly new to React, and I've set up a private route with an authToken passed through props from the state of App.js. The idea is that if the authToken is true, the private route should direct me to /HomePage, but whenever I log in with valid ...

Issue with SVG on tainted canvas causes IE security error when using toDataURL

In my Angular JS directive, I have implemented a feature to export SVGs to PNG. While this functionality works seamlessly in most browsers, it encounters a security error in IE. Despite my numerous attempts to troubleshoot the issue, I have been unable to ...

Why does the Vue router sometimes refresh the page instead of properly navigating to it? Can you spot the difference between these two code examples?

I am encountering an issue while trying to click on a "checkout" button that is supposed to send cart data to a backend and redirect me to a URL generated by the backend. Despite receiving a valid URL, my code is not functioning correctly. When I attempt ...

The value on the input of a custom Vue component does not update as expected when using v

I'm currently working on a custom component called customCombobox. It functions similarly to a regular v-combobox, but with an added feature - after the user presses the tab key, it automatically selects the first option available. Everything in my i ...

Display only the relevant search results using ng-show in AngularJS

By utilizing the code below, I am able to filter results where all entries are displayed on the page: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name: ...

Utilizing inputRef in conjunction with MUI's useAutocomplete

Is there a way to pass the "inputRef" to Material UI's useAutocomplete? I'm looking to set a custom reference on the input, but the getInputProps() method from useAutocomplete already requires its own reference. I've attempted various appr ...

Toggling dropdown menus with conditional Jquery statements

I am experiencing some discomfort. :) I've been working on a calorie calculator that includes a dropdown for various dietary preferences. Currently, when a user clicks the button, the dropdown appears and disappears when clicking outside the button. ...

Retrieve various key-value pairs from the JSON data in the global market API using AJAX

I have recently developed a real-time API specifically designed for monitoring World Stock Markets. This API covers popular indices such as Nifty, Dow Jones, Nasdaq, and SGX Nifty. If you are interested in accessing this Real Time API, you can do so by vi ...

Steps to create a personalized material-ui element

I am looking to create a custom time duration component by modifying the TextField component. https://i.stack.imgur.com/fLsFs.png https://i.stack.imgur.com/SdpdH.png If anyone has any advice or assistance, it would be greatly appreciated. Thank you! ...

Hide the Select Column from the material-react-table

Can someone help me with hiding specific columns in the material-react-table component? I've searched the documentation but couldn't find any relevant information. import { useMemo, useState } from "react"; import { MaterialReactTable } ...