如何将对象值绑定到 html - Angular 5

Question

您好，我想打印 HTML 中单个对象的值，但它会引发错误。

{
  "id": "221",
  "user_id": "455",
  "membership_id": "3",
  "is_cemetery": "0",
  "first_name": "tinku",
  "last_name": "tinku",
  "gender": "male",
  "dob": "2019-03-16",
  "i_am": "",
  "looking_for": "",
  "phone": "9876543210",
  "street": "",
  "city": "mohali",
  "state": "",
  "country": "GE",
  "zipcode": "160055",
  "photo": "",
  "description": "test",
  "created_date": "2019-05-27 10:23:46",
  "country_name": "Georgia",
  "image": false,
  "dogs": [{
    "id": "336",
    "user_id": "455",
    "agency_name": "tinkurana99",
    "dog_name": "Tom",
    "training_status": "",
    "selectbreed": "Cross",
    "breed": "261",
    "dog_color": "red",
    "dog_gender": "male",
    "maturity": "Puppy",
    "age_type": "",
    "dog_age": "",
    "age_year": "2",
    "age_month": "2",
    "age_week": "2",
    "eating_habit": "",
    "istrained": "Yes",
    "vaccinated": "yes",
    "description": "Doggy Dating agency",
    "dog_photo": "uploads/5cec705462b13.jpeg",
    "cemetery": "No",
    "start_year": "",
    "end_year": "",
    "cemetery_content": "",
    "iam_status": "4",
    "dog_price": "",
    "status": "active",
    "admin_status": "Approve",
    "created_date": "2019-05-27 10:03:32",
    "breed_name": "Australian Terrier-Akita Inu"
  }]
}

所以这个对象是从 TS 文件传递过来的：

this.userData = this.response.data;

在 HTML 中，我正在访问这样的值：

{{ userData.city }}

但是它抛出了城市是 undefined 的错误。请帮我解决一下这个。我正在使用 ionic3.

谢谢

Answer 1

写这个

{{userData?.city}}

而不是

{{userData.city}}

？是安全导航运算符。它检查变量是否为空或未定义，这样我们的模板就不会尝试 select 一个属性的东西。

Answer 2

{{userData?.city}}

试试这个

Answer 3

也许您使用 userData 作为任何数据类型。你可以通过这种方式访问它 {{userData?.city}}

如何将对象值绑定到 html - Angular 5

How to bind object value to html - Angular 5

ionic3

angular