Я не могу понять, как работает привязка данных в Angular? - PullRequest
Новая
       5

Я не могу понять, как работает привязка данных в Angular?

0 голосов
/ 27 февраля 2020

Мне интересно узнать, как работает следующий код, даже когда я использовал имя kish в файле TS, но нашел их с именем dish в файле HTML?

di sh. ts: 

export class Dish {
    name: string;
    image: string;
    category: string;
    label: string;
    price: string;
    description: string;
}

menu.component.ts: 

import { Component, OnInit } from '@angular/core';

import { Dish } from '../shared/dish';

const kish: Dish[] = [
  {
    name:'Uthappizza',
    image: '/assets/images/uthappizza.png',
    category: 'mains',
    label:'Hot',
    price:'4.99',
    description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'                        },
 {
    name:'Zucchipakoda',
    image: '/assets/images/zucchipakoda.png',
    category: 'appetizer',
    label:'',
    price:'1.99',
    description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'                        },
 {
    name:'Vadonut',
    image: '/assets/images/vadonut.png',
    category: 'appetizer',
    label:'New',
    price:'1.99',
    description:'A quintessential ConFusion experience, is it a vada or is it a donut?'                        },
 {
    name:'ElaiCheese Cake',
    image: '/assets/images/elaicheesecake.png',
    category: 'dessert',
    label:'',
    price:'2.99',
    description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'                        }
 ];

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  dishes: Dish[] = kish;

  selectedDish = kish[0];

  constructor() { }

  ngOnInit() {
  }

}

menu.component. html: 

<div class="container"
fxLayout="column"
fxLayoutGap="10px">

  <div fxFlex>
    <div>
    <h3>Menu</h3>
    <hr>
    </div>
  </div>

  <div fxFlex>
    <mat-grid-list cols="2" rowHeight="200px">
    <mat-grid-tile *ngFor="let dish of dishes">
      <img height="200px" src={{dish.image}} alt={{dish.name}}>
      <mat-grid-tile-footer>
        <h1 mat-line>{{dish.name | uppercase}}</h1>
      </mat-grid-tile-footer>
    </mat-grid-tile>
    </mat-grid-list>
  </div>

  <app-dishdetail>
  </app-dishdetail>

</div>
...