Angular 5属性“用户名”在类型“ string []”上不存在

时间:2018-12-14 05:53:28

标签: angular typescript

我正在尝试制作一个简单的编辑组件。从Java脚本的角度看,我看不到任何错误,但是我认为我没有按照Angular的方式使用示波器,因此我正在寻找一些指导。 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']);
    }
}

我的HTML代码是 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>

期望什么?

我不知道是因为我的写作,还是因为配置导致了此错误。我根据官方文档编写了代码。我相信它可以成功构建。

实际情况是什么?

当我运行npm run build时,完整的提示如下:

  

1>中的错误   src \ app \ admin \ customers \ customer-edit \ customer-edit.component.html(10,97):   :属性'username'在类型'string []'上不存在。

谢谢。

3 个答案:

答案 0 :(得分:2)

您已将temp[j] = (new_k[1][j] - probe[j]) 声明为data字符串数组,但它应为string[]类型,并且您正在以any的身份访问该data的属性

还需要解析字符串data.userName

答案 1 :(得分:2)

将“数据”变量声明为

data:any;

它将解决您的问题

答案 2 :(得分:1)

我遇到了同样的问题,并通过导入Response解决了该问题, 从'@ angular / Http'导入{Http,Response};