角度 5 属性'username'在类型 'string[]' 上不存在

Question

我正在尝试制作一个简单的编辑组件。从Javascript的角度来看，我看不出有什么错误，但我认为我没有按照Angular想要的方式处理范围，所以我正在寻找一些指导。ERROR in srcappadmincustomerscustomer-editcustomer-edit.component.html(10,97): : Property 'username' does not exist on type 'string[]'.

客户编辑组件.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代码是客户编辑组件.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\customs\customer-edit\customer-edit.component.html(10,97(：：类型"string[]"上不存在属性"username"。

谢谢。

Answer 1

将"data"变量声明为

data:any;

它将解决你的问题

Answer 2

您已经将data声明为string[]字符串数组，但它应该是any类型，并且您正在将该data的属性访问为data.userName

此外，您还需要解析字符串JSON.parse

Answer 3

我遇到了同样的问题，并通过导入Response解决了这个问题，从"@angular/Http"导入｛Http，Response｝；