ค้นหาเว็บไซต์

typescript - คุณสมบัติ 'address' ไม่มีอยู่ในประเภท {} ขณะเข้าสู่โหมดการผลิต Angular 4


ฉันกำลังทำงานบนเว็บไซต์ที่ใช้ Angular 4 มันทำงานได้ดีจนกระทั่งฉันไปยังโหมดโปรดักชัน ในระหว่างโหมดโปรดักชันการคอมไพล์ด้วย ng build ดูเหมือนจะทำงานได้ดี แต่เมื่อฉันรัน ng build --prod มันกลับเกิดข้อผิดพลาดแบบนี้

มุมมองของฉันประมาณแบบนี้

<ul class="personal-info list-inline clearfix mb-5">
  <li><strong>Full Name :</strong>{{details.name}}</li>
  <li><strong>Birthday :</strong>{{details.birth_day}}</li>
  <li><strong>Address :</strong>{{details.address}}</li>
  <li><strong>Phone :</strong>{{details.phone}}</li>
  <li><strong>Email :</strong> <a href="">{{details.email}}</a></li>
  <li><strong>Job :</strong>{{details.job}}</li>
  <li><strong>Skype :</strong> {{details.skype}}</li>
</ul>

และส่วนประกอบของฉันก็ประมาณนี้

export class AppComponent implements OnInit {


  title = 'app';
  slider = {};
  specialities = {};
  works = {};
  details = {};
  image;
  html;
  image1;
  private url = "http://localhost/portfolio/api/home/data"

  constructor(private http: Http) {
  }
  ngOnInit() {
    this.getData();
  }

  getData() {
    return this.http.get(this.url)
      .map((res: Response) => res.json()).subscribe(res => {
        this.slider = res.slider;
        this.specialities = res.specialities;
        this.works = res.works
        this.details = res.details;
        console.log(res);
      });
  }


}

ฉันได้ค้นหาข้อผิดพลาดแล้วแต่ไม่สามารถหาวิธีแก้ไขได้ จะทำอย่างไรจึงจะแก้ปัญหานี้ได้ ความช่วยเหลือใด ๆ จะได้รับการชื่นชม ขอบคุณ

คำตอบ #1

Typescript กำลังมองหาคุณสมบัติ name, birth_day เป็นต้น บนคลาส Object แต่คุณสมบัติเหล่านี้ไม่มีอยู่ในคลาส Object คุณจำเป็นต้องประกาศประเภทของอ็อบเจ็กต์ของคุณเป็น any จากนั้น Typescript จะไม่บ่นเกี่ยวกับชื่อคุณสมบัติของคุณ ตัวอย่างเช่น:

slider: any = {};
specialities: any = {};
works: any = {};
details: any = {};

คำตอบ #2

คุณควรสร้างคลาส Details และประกาศรายละเอียดดังต่อไปนี้ในคอมโพเนนต์,

export class Detail {
  name : string;
  .............
  etc
}

และภายในตัวส่วนประกอบ,

details:Detail ;