{"id":278410,"date":"2016-04-15T21:10:04","date_gmt":"2016-04-15T17:10:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=278410"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=278410","title":{"rendered":"Angular 2 Beta, \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0439 \u043a\u0443\u0440\u0441 \u00ab\u0422\u0443\u0440 \u0433\u0435\u0440\u043e\u0435\u0432\u00bb \u0447\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"
\n

\u041d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0435\u0440\u043e\u0435\u0432<\/h2>\n

<\/p>\n

\u041d\u0430\u0448\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0435\u0440\u043e\u0435\u0432. \u041c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0422\u0443\u0440 \u0433\u0435\u0440\u043e\u0435\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0433\u0435\u0440\u043e\u044f, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043d\u0435\u043c.<\/p>\n

<\/a> <\/p>\n

\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0430\u0441\u0442\u044c 2<\/a><\/p>\n

<\/p>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d. <\/p>\n

<\/p>\n

\u0413\u0434\u0435 \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c<\/h3>\n

<\/p>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0422\u0443\u0440\u0430 \u0433\u0435\u0440\u043e\u0435\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438, \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u043d\u0430\u0437\u0430\u0434.<\/p>\n

<\/p>\n

\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h4>\n

<\/p>\n

\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 TypeScript, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 web-\u0441\u0435\u0440\u0432\u0435\u0440. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u043d\u0430\u0431\u0440\u0430\u0432 <\/p>\n

<\/p>\n

    npm start<\/code><\/pre>\n
  <\/p>\n
\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c, \u043f\u043e\u043a\u0430 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0422\u0443\u0440 \u0433\u0435\u0440\u043e\u0435\u0432.<\/p>\n
  <\/p>\n
\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0433\u0435\u0440\u043e\u0435\u0432<\/h3>\n
  <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u0435\u0440\u043e\u0435\u0432<\/h4>\n
  <\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u0438 \u0433\u0435\u0440\u043e\u0435\u0432 \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 app.component.ts<\/code>.<\/p>\n
  <\/p>\n
app.component.ts (\u041c\u0430\u0441\u0441\u0438\u0432 \u0433\u0435\u0440\u043e\u0435\u0432)<\/strong><\/p>\n
  <\/p>\n
    let HEROES: Hero[] = [       { "id": 11, "name": "Mr. Nice" },       { "id": 12, "name": "Narco" },       { "id": 13, "name": "Bombasto" },       { "id": 14, "name": "Celeritas" },       { "id": 15, "name": "Magneta" },       { "id": 16, "name": "RubberMan" },       { "id": 17, "name": "Dynama" },       { "id": 18, "name": "Dr IQ" },       { "id": 19, "name": "Magma" },       { "id": 20, "name": "Tornado" }     ];<\/code><\/pre>\n
  <\/p>\n
HEROES<\/code> \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0438\u043f\u0430 Hero<\/code>, \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u041c\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0438\u0437 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0448\u0430\u0433\u0438, \u0438 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0433\u0435\u0440\u043e\u0435\u0432 \u0438\u0437 \u043c\u043e\u043a-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435).<\/p>\n
  <\/p>\n
\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0435\u0440\u043e\u0435\u0432<\/h4>\n
  <\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 AppComponent<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0433\u0435\u0440\u043e\u0435\u0432 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
app.component.ts (\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0433\u0435\u0440\u043e\u0435\u0432)<\/strong><\/p>\n
  <\/p>\n
    public heroes = HEROES;<\/code><\/pre>\n
  <\/p>\n
\u041d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0438\u043f \u0434\u043b\u044f heroes<\/code>. TypeScript \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 HEROES<\/code>.<\/p>\n
  <\/p>\n
\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0437\u0434\u0435\u0441\u044c, \u0432 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u043e \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0433\u0435\u0440\u043e\u0435\u0432 \u0438\u0437 web-\u0441\u043b\u0443\u0436\u0431\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430.<\/p><\/blockquote>\n
  <\/p>\n
\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0435\u0440\u043e\u0435\u0432 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435<\/h4>\n
  <\/p>\n
\u041d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 heroes<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0445. \u041c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0443\u0441\u043e\u043a HTML \u043f\u043e\u0434 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c, \u0432\u044b\u0448\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0433\u0435\u0440\u043e\u0435.<\/p>\n
  <\/p>\n
app.component.ts (\u0428\u0430\u0431\u043b\u043e\u043d \u0433\u0435\u0440\u043e\u0435\u0432)<\/strong><\/p>\n
  <\/p>\n
    <h2>My Heroes<\/h2>     <ul class="heroes">       <li>         <!-- each hero goes here -->       <\/li>     <\/ul><\/code><\/pre>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438\u043c\u0438 \u0433\u0435\u0440\u043e\u044f\u043c\u0438.<\/p>\n
  <\/p>\n
\u0412\u044b\u0432\u043e\u0434 \u0441\u043f\u0438\u0441\u043a\u0430 \u0433\u0435\u0440\u043e\u0435\u0432 \u0441 ngFor<\/h4>\n
  <\/p>\n
\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0433\u0435\u0440\u043e\u0435\u0432 \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e, \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0433\u0435\u0440\u043e\u0435\u0432 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0449\u044c Angular, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c:
  \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0442\u0435\u0433 <li><\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 *ngFor<\/code>.<\/p>\n
  <\/p>\n
app.component.ts (ngFor)<\/strong><\/p>\n
  <\/p>\n
    <li *ngFor="#hero of heroes"><\/code><\/pre>\n
  <\/p>\n
*\u0412\u0435\u0434\u0443\u0449\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430 (`<\/em>) \u043f\u0435\u0440\u0435\u0434<\/code>ngFor` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430.**<\/p><\/blockquote>\n
  <\/p>\n
\u041f\u0440\u0435\u0444\u0438\u043a\u0441 *<\/code> \u0434\u043b\u044f ngFor<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <li><\/code> \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043c\u0430\u0441\u0442\u0435\u0440-\u0448\u0430\u0431\u043b\u043e\u043d.<\/p>\n
  <\/p>\n
\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ngFor<\/code> \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 heroes<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0440\u043d\u0443\u043b\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e AppComponent.heroes<\/code>, \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d.<\/p>\n
  <\/p>\n
\u0422\u0435\u043a\u0441\u0442 \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445, \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043d\u044b\u0439 ngFor<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442: "\u0432\u043e\u0437\u044c\u043c\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 heroes<\/code>, \u0441\u043e\u0445\u0440\u0430\u043d\u0438 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 hero<\/code>, \u0438 \u0441\u0434\u0435\u043b\u0430\u0439 \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430".<\/p>\n
  <\/p>\n
\u041f\u0440\u0435\u0444\u0438\u043a\u0441 #<\/code> \u043f\u0435\u0440\u0435\u0434 hero<\/code> \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0433\u0435\u0440\u043e\u044f \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0417\u0430\u0442\u0435\u043c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0433\u0435\u0440\u043e\u044f.<\/p>\n
  <\/p>\n
\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e ngFor<\/code> \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0430\u0445 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/a> \u0438 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/a>.<\/p>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0442\u044d\u0433\u0430\u043c\u0438 <li><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 hero<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0435\u0440\u043e\u044f.<\/p>\n
  <\/p>\n
app.component.ts (ngFor template)<\/strong><\/p>\n
  <\/p>\n
    <li *ngFor="#hero of heroes">       <span class="badge">{{hero.id}}<\/span> {{hero.name}}     <\/li><\/code><\/pre>\n
  <\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432!<\/p>\n
  <\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0430\u0448\u0438\u043c \u0433\u0435\u0440\u043e\u044f\u043c<\/h4>\n
  <\/p>\n
\u041d\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043a\u0443\u0447\u043d\u043e. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u043a\u0430\u043a\u043e\u0439 \u0433\u0435\u0440\u043e\u0439 \u0432\u044b\u0431\u0440\u0430\u043d, \u0430 \u043d\u0430\u0434 \u043a\u0430\u043a\u0438\u043c \u0433\u0435\u0440\u043e\u0435\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0443\u0440\u0441\u043e\u0440.<\/p>\n
  <\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u041f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 styles<\/code> \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435 @Component<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 CSS \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n
  <\/p>\n
app.component.ts (\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439)<\/strong><\/p>\n
  <\/p>\n
    styles:[`       .selected {         background-color: #CFD8DC !important;         color: white;       }       .heroes {         margin: 0 0 2em 0;         list-style-type: none;         padding: 0;         width: 15em;       }       .heroes li {         cursor: pointer;         position: relative;         left: 0;         background-color: #EEE;         margin: .5em;         padding: .3em 0;         height: 1.6em;         border-radius: 4px;       }       .heroes li.selected:hover {         background-color: #BBD8DC !important;         color: white;       }       .heroes li:hover {         color: #607D8B;         background-color: #DDD;         left: .1em;       }       .heroes .text {         position: relative;         top: -3px;       }       .heroes .badge {         display: inline-block;         font-size: small;         color: white;         padding: 0.8em 0.7em 0 0.7em;         background-color: #607D8B;         line-height: 1em;         position: relative;         left: -1px;         top: -4px;         height: 1.8em;         margin-right: .8em;         border-radius: 4px 0 0 4px;       }     `]<\/code><\/pre>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `-\u043d\u043e\u0442\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n
  <\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a AppComponent<\/code> \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 "\u0443\u0442\u0435\u043a\u0430\u0442\u044c" \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 HTML.<\/p>\n
  <\/p>\n
\u041d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0433\u0435\u0440\u043e\u0435\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
  <\/p>\n
app.component.ts (\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0433\u0435\u0440\u043e\u0435\u0432)<\/strong><\/p>\n
  <\/p>\n
    <h2>My Heroes<\/h2>     <ul class="heroes">       <li *ngFor="#hero of heroes">         <span class="badge">{{hero.id}}<\/span> {{hero.name}}       <\/li>     <\/ul><\/code><\/pre>\n
  <\/p>\n
\u041a\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0439! \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0437\u0434\u0435\u0441\u044c, \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u0441\u0435, \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/p>\n
  <\/p>\n
\u0412\u044b\u0431\u043e\u0440 \u0433\u0435\u0440\u043e\u044f<\/h3>\n
  <\/p>\n
\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u043e\u0434\u043d\u043e\u043c \u0433\u0435\u0440\u043e\u0435. \u0421\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432 \u0438 \u043e\u0434\u0438\u043d \u0433\u0435\u0440\u043e\u0439 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u0433\u0435\u0440\u043e\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435, \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0433\u0435\u0440\u043e\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u042d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d UI \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043a\u0430\u043a "Master-Detail" (\u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a "\u0433\u043b\u0430\u0432\u043d\u044b\u0439-\u043f\u043e\u0434\u0447\u0438\u043d\u0435\u043d\u043d\u044b\u0439", \u043d\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f "Master\/Detail"). \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, Master \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432, \u0430 Detail \u2014 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f.
  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c Master \u0441 Detail \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 ‘selectedHero’, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u0433\u0435\u0440\u043e\u0435 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<\/p>\n
  <\/p>\n
\u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 (\u0449\u0435\u043b\u0447\u043a\u0430 \u043c\u044b\u0448\u0438)<\/h4>\n
  <\/p>\n
\u0418\u0437\u043c\u0435\u043d\u0438\u043c <li><\/code>, \u0432\u0441\u0442\u0430\u0432\u0438\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f Angular.<\/p>\n
  <\/p>\n
app.component.ts (\u0417\u0430\u0445\u0432\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430)<\/strong><\/p>\n
  <\/p>\n
    <li *ngFor="#hero of heroes" (click)="onSelect(hero)">       <span class="badge">{{hero.id}}<\/span> {{hero.name}}     <\/li><\/code><\/pre>\n
  <\/p>\n
\u0421\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:<\/p>\n
  <\/p>\n
    (click)="onSelect(hero)"<\/code><\/pre>\n
  <\/p>\n
\u0421\u043a\u043e\u0431\u043a\u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <li><\/code> \u0446\u0435\u043b\u044c\u044e \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0437\u043d\u0430\u043a\u0430 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 onSelect()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 AppComponent<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 hero<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f hero<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432 ngFor<\/code>.<\/p>\n
  <\/p>\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 \u0433\u043b\u0430\u0432\u0430\u0445 \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434<\/a> \u0438 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/a>.<\/p><\/blockquote>\n
  <\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043a\u043b\u0438\u043a\u0430<\/h4>\n
  <\/p>\n
\u041d\u0430\u0448\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u043a \u043c\u0435\u0442\u043e\u0434\u0443 onSelect<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u0427\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434? \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e "\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0433\u0435\u0440\u043e\u0439" \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n
  <\/p>\n
\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u043d\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0435.<\/p>\n
  <\/p>\n
\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f<\/h4>\n
  <\/p>\n
\u041d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e hero<\/code> \u0432 AppComponent<\/code>. \u0417\u0430\u043c\u0435\u043d\u0438\u043c<\/strong> \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e selectedHero<\/code>:<\/p>\n
  <\/p>\n
app.component.ts (selectedHero)<\/strong><\/p>\n
  <\/p>\n
    selectedHero: Hero;<\/code><\/pre>\n
  <\/p>\n
\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0433\u0435\u0440\u043e\u0439 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u043d\u0435 \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0433\u0435\u0440\u043e\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c selectedHero<\/code>, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0441 hero<\/code>.<\/p>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434 onSelect<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e selectedHero<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 hero<\/code>, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n
  <\/p>\n
app.component.ts (onSelect)<\/strong><\/p>\n
  <\/p>\n
    onSelect(hero: Hero) { this.selectedHero = hero; }<\/code><\/pre>\n
  <\/p>\n
\u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 hero<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 selectedHero<\/code>.<\/p>\n
  <\/p>\n
app.component.ts (\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a selectedHero’s)<\/strong><\/p>\n
  <\/p>\n
    <h2>{{selectedHero.name}} details!<\/h2>     <div><label>id: <\/label>{{selectedHero.id}}<\/div>     <div>         <label>name: <\/label>         <input [(ngModel)]="selectedHero.name" placeholder="name"\/>     <\/div><\/code><\/pre>\n
  <\/p>\n
\u0421\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0443\u0441\u0442\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 ngIf<\/h4>\n
  <\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432, \u043d\u043e \u0433\u0435\u0440\u043e\u0439 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d. selectedHero<\/code> \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u043d undefined<\/code>. \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430:<\/p>\n
  <\/p>\n
    EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]<\/code><\/pre>\n
  <\/p>\n
\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c selectedHero.name<\/code> \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e name<\/code> \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f selectedHero<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430.<\/p>\n
  <\/p>\n
\u041c\u044b \u0440\u0435\u0448\u0438\u043c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0443\u0431\u0440\u0430\u0432 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0433\u0435\u0440\u043e\u0435 \u0438\u0437 DOM \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0433\u0435\u0440\u043e\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u043d.<\/p>\n
  <\/p>\n
\u041c\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0433\u0435\u0440\u043e\u0435, \u0432 <div><\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 ngIf<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e selectedHero<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
  <\/p>\n
app.component.ts (ngIf)<\/strong><\/p>\n
  <\/p>\n
    <div *ngIf="selectedHero">       <h2>{{selectedHero.name}} details!<\/h2>       <div><label>id: <\/label>{{selectedHero.id}}<\/div>       <div>         <label>name: <\/label>         <input [(ngModel)]="selectedHero.name" placeholder="name"\/>       <\/div>     <\/div><\/code><\/pre>\n
  <\/p>\n
*\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u0435\u0434\u0443\u0449\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430 (<\/em>) \u043f\u0435\u0440\u0435\u0434 ‘ngIf’ \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430.**<\/p><\/blockquote>\n
  <\/p>\n
\u041f\u043e\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f selectedHero<\/code> \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ngIf<\/code> \u0443\u0434\u0430\u043b\u044f\u0435\u0442 HTML \u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0433\u0435\u0440\u043e\u0435 \u0438\u0437 DOM. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0433\u0435\u0440\u043e\u0435, \u043d\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u043e\u0438\u0442 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f.<\/p>\n
  <\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0433\u0435\u0440\u043e\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f selectedHero<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439, \u0430 ngIf<\/code> \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0433\u0435\u0440\u043e\u0435 \u0432 DOM \u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438.<\/p>\n
  <\/p>\n
ngIf<\/code> \u0438 `ngFor’ \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f "\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u043c\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u043c\u0438", \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0447\u0430\u0441\u0442\u0435\u0439 DOM. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a Angular \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 DOM.<\/p><\/blockquote>\n
  <\/p>\n
\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e ngIf, ngFor \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0430\u0445 \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/a> \u0438 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/a>.<\/p>\n
  <\/p>\n
\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u0435\u0440\u043e\u0435\u0432, \u043d\u043e \u0431\u0435\u0437 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0433\u0435\u0440\u043e\u0435. NgIf<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0435\u0435 \u0432\u043d\u0435 DOM, \u043f\u043e\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f selectedHero<\/code> \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0433\u0435\u0440\u043e\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0433\u0435\u0440\u043e\u0435. \u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u043b\u0438.<\/p>\n
  <\/p>\n
\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n
  <\/p>\n
\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0433\u0435\u0440\u043e\u0435 \u043f\u043e\u0434 \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u043d\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0432\u044b\u0448\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 CSS selected<\/code> \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <li><\/code> \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Magenta \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0433\u0435\u0440\u043e\u0435\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0437\u0434\u0435\u0441\u044c.<\/p>\n
  <\/p>\n
\"heroes-list-selected\"\/<\/p>\n
  <\/p>\n
\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 class<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 selected<\/code>. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e selectedHero<\/code> \u0438 hero<\/code>.
  \u041a\u043b\u044e\u0447 \u044d\u0442\u043e \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 CSS (selected<\/code>). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u0438\u043d\u043d\u043e (true<\/code>), \u0435\u0441\u043b\u0438 \u043e\u0431\u0430 \u0433\u0435\u0440\u043e\u044f \u0441\u043e\u0432\u043f\u0430\u043b\u0438 \u0438 \u043b\u043e\u0436\u044c (false<\/code>) \u0438\u043d\u0430\u0447\u0435. \u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c "\u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 selected<\/code>, \u0435\u0441\u043b\u0438 \u0433\u0435\u0440\u043e\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0435\u0433\u043e, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a"<\/em>.<\/p>\n
  <\/p>\n
app.component.ts (\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 CSS \u043a\u043b\u0430\u0441\u0441\u0430)<\/strong><\/p>\n
  <\/p>\n
    [class.selected]="hero === selectedHero"<\/code><\/pre>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 class.selected<\/code> \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 ([]<\/code>). \u042d\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0442\u043e\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0434\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043e\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 hero === selectedHero<\/code>) \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 class<\/code>.<\/p>\n
  <\/p>\n
app.component.ts (\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f)<\/strong><\/p>\n
  <\/p>\n
    <li *ngFor="#hero of heroes"       [class.selected]="hero === selectedHero"       (click)="onSelect(hero)">       <span class="badge">{{hero.id}}<\/span> {{hero.name}}     <\/li><\/code><\/pre>\n
  <\/p>\n
\u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a> \u043c\u043e\u0436\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0435 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432.<\/p><\/blockquote>\n
  <\/p>\n
\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u0435\u0440\u043e\u044f Magenta, \u0438 \u0432\u044b\u0431\u043e\u0440 \u0447\u0435\u0442\u043a\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430.<\/p>\n
  <\/p>\n
\"heroes-list\"\/<\/p>\n
  <\/p>\n
\u041c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0438 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f.<\/p>\n
  <\/p>\n
\u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 app.component.ts<\/code> \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442:<\/p>\n
  <\/p>\n
app.component.ts<\/strong><\/p>\n
  <\/p>\n
import {Component} from 'angular2\/core';     export class Hero {       id: number;       name: string;     }     @Component({       selector: 'my-app',       template:`         <h1>{{title}}<\/h1>         <h2>My Heroes<\/h2>         <ul class="heroes">           <li *ngFor="#hero of heroes"             [class.selected]="hero === selectedHero"             (click)="onSelect(hero)">             <span class="badge">{{hero.id}}<\/span> {{hero.name}}           <\/li>         <\/ul>         <div *ngIf="selectedHero">           <h2>{{selectedHero.name}} details!<\/h2>           <div><label>id: <\/label>{{selectedHero.id}}<\/div>           <div>             <label>name: <\/label>             <input [(ngModel)]="selectedHero.name" placeholder="name"\/>           <\/div>         <\/div>       `,       styles:[`         .selected {           background-color: #CFD8DC !important;           color: white;         }         .heroes {           margin: 0 0 2em 0;           list-style-type: none;           padding: 0;           width: 15em;         }         .heroes li {           cursor: pointer;           position: relative;           left: 0;           background-color: #EEE;           margin: .5em;           padding: .3em 0;           height: 1.6em;           border-radius: 4px;         }         .heroes li.selected:hover {           background-color: #BBD8DC !important;           color: white;         }         .heroes li:hover {           color: #607D8B;           background-color: #DDD;           left: .1em;         }         .heroes .text {           position: relative;           top: -3px;         }         .heroes .badge {           display: inline-block;           font-size: small;           color: white;           padding: 0.8em 0.7em 0 0.7em;           background-color: #607D8B;           line-height: 1em;           position: relative;           left: -1px;           top: -4px;           height: 1.8em;           margin-right: .8em;           border-radius: 4px 0 0 4px;         }       `]     })     export class AppComponent {       title = 'Tour of Heroes';       heroes = HEROES;       selectedHero: Hero;       onSelect(hero: Hero) { this.selectedHero = hero; }     }     var HEROES: Hero[] = [       { "id": 11, "name": "Mr. Nice" },       { "id": 12, "name": "Narco" },       { "id": 13, "name": "Bombasto" },       { "id": 14, "name": "Celeritas" },       { "id": 15, "name": "Magneta" },       { "id": 16, "name": "RubberMan" },       { "id": 17, "name": "Dynama" },       { "id": 18, "name": "Dr IQ" },       { "id": 19, "name": "Magma" },       { "id": 20, "name": "Tornado" }     ];<\/code><\/pre>\n
  <\/p>\n
\u041f\u0443\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0440\u043e\u0448\u043b\u0438<\/h3>\n
  <\/p>\n
\u0412\u043e\u0442 \u0442\u043e, \u0447\u0435\u0433\u043e \u043c\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435:<\/p>\n
  <\/p>\n