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

Question

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

客户编辑.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) 中的错误：：类型“字符串[]”上不存在属性“用户名”。

谢谢。

Answer 1

将“数据”变量声明为

data:any;

它会解决你的问题