Angular 5 Property 'username' does not exist on type 'string[]'

Question

I'm trying to make a simple edit component. From a Javascript view, I can't see anything wrong, but I think I'm not working with a scope the way Angular wants, so I'm looking for some guidance. ERROR in src\app\admin\customers\customer-edit\customer-edit.component.html(10,97): : Property 'username' does not exist on type 'string[]'.

customer-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup} from '@angular/forms';
import { Router } from '@angular/router';
import { ToasterService, ToasterConfig } from 'angular2-toaster';
import { AdminService } from '../../admin.service';
import { customer } from '../../../../environments/environment';

@Component({
    selector: 'app-admin/customer/edit-list',
    templateUrl: './customer-edit.component.html',
    styleUrls: ['./customer-edit.component.scss']
})

export class CustomerEditComponent implements OnInit {

    editCustomerForm: FormGroup;
    toaster: any;
    data: string[];
    toasterConfig: any;
    toasterconfig: ToasterConfig = new ToasterConfig({
        positionClass: 'toast-bottom-right',
        showCloseButton: true
    });

    constructor(
        private adminService: AdminService,
        private toasterService: ToasterService,
        private router: Router
    ) { }

    ngOnInit() {
        this.getProfile();
    }

    getProfile() {
        let dataCustomer = JSON.parse(localStorage.getItem('data'));
        this.data = dataCustomer as string[];
    }

    updateProfile(data) {
        let dataSelect = {
            id: data.id,
            email: ((document.getElementById("txt_newEmail") as HTMLInputElement).value),
            mobile: ((document.getElementById("txt_newMobileNumber") as HTMLInputElement).value),
            password: ((document.getElementById("txt_newPassowrd") as HTMLInputElement).value),
        }
        this.adminService.add<any>(customer.customerUpdate, dataSelect).subscribe(res => {
            this.toasterService.pop('success', 'Success', res.message);
        }, error => {
            this.toasterService.pop('error', 'Error', error.error.message);
        });
    }

    navigateCancle() {
        this.router.navigate(['admin/customers/list']);
    }
}

My Html code is customer-edit.component.html

<legend style="align-content:center">Edit Customer</legend>
    <div class="col-lg-12">
         <form class="text-center border border-light p-5">
                <div class="row col-md-12">
                            <label class="col-md-4" style="text-align:right;font-size:20px">Username</label>
                            <label class="col-md-6 mb-4" style="text-align:left;font-size:20px">{{data.username}}</label>
                        </div>
                        <div class="row col-md-12">
                            <button class="btn btn-info col-md-4" type="submit" (click)="updateProfile(data)">Update</button>
                            <div class="col-1"></div>
                            <button class="btn btn-danger col-md-4" type="submit" (click)="navigateCancle()" >Cancle</button>
                        </div>
                    </form>
                </div>

What is expected?

I don't know if it's because of my writing, or because of the configuration that caused me this error. I wrote the code based on the official document. I believe it can be built successfully.

What is actually happening?

When I run npm run build, The complete prompt is as follows:

1>ERROR in src\app\admin\customers\customer-edit\customer-edit.component.html(10,97): : Property 'username' does not exist on type 'string[]'.

Thanks.

Well you have string array, and you are trying to use as object. Try this one : data[0].username instead of data.username. Or change data : string[] to data : any;. — Shashikant Devani
– Shashikant Devani, Commented Dec 14, 2018 at 6:02

Auqib Rather · Accepted Answer · 2018-12-14 09:26:04Z

9

declare 'data' variable as

data:any;

it will solve your problem

edited Dec 14, 2018 at 9:26

answered Dec 14, 2018 at 6:03

Auqib Rather

3961 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Mani · Accepted Answer · 2018-12-14 06:01:10Z

4

You have declared data as string[] string array, but it should be of any type and you are accessing the property of that data as data.userName

Also you need to parse string JSON.parse

answered Dec 14, 2018 at 6:01

Abhishek Mani

5224 silver badges13 bronze badges

Comments

Alois Napitalai · Accepted Answer · 2019-04-29 09:17:56Z

1

I had the same problem and resolved the issue by importing Response, import { Http,Response } from '@angular/Http';

answered Apr 29, 2019 at 9:17

Alois Napitalai

313 bronze badges

Collectives™ on Stack Overflow

Angular 5 Property 'username' does not exist on type 'string[]'

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related