Four ANGULAR4 Heroic Journey heroconquest-Master-slave structure

(iv) ANGULAR4 heroic journey heroconquest-Master-slave structure Master and slave structure

At the same time in a component, contains a main structure module, including several other from the module, from the module to rely on the main module. app.component.ts File

Import ANGULAR4 core modules:

Import {Component} from ' @angular/core ';

To define a template:

@Component ({selector: ' app-root ', Template: '  
  class and property definitions  
 

Export class Appcomponent {title = ' My Conquest are the Sea of stars. '
  from = ' Reinhard von Lohengramm ';

  Hero:heroproperty = {id:9527, name: ' Lee ',};
  Heros = Heroarray;

Selectedhero:heroproperty;
If there is no Selectedhero initialization and no *ngif, all model data renders fail when the page is loaded. The reason is just beginning to load the page Selectedhero dom has no value, a load page, the browser can not load out,//So simply do not present, once the trigger is all revealed (this phenomenon of professional data is called, which predecessors if understand,//also please leave a message pointing,
I guess and Ng4 dirty value detection mechanism)//solution One: Selectedhero initialization, otherwise the expression in {{}} in the template will not appear, initialized as follows://Selectedhero:heroproperty = {//Id:7,//}; Solution Two: Use *ngif, before being selected to remove from the structure of the Selectedhero model data is related to the label, or all from the structure, ngif removal, is a DOM removed, rather than simply hidden//hidden, then click <li> </li> before choosing, the data from the structure will not appear in the DOM, thus avoiding the understanding//Selectedhero null data (undefined, we will see the following error//error in the browser console: Exception:typeerror:  Cannot read property ' name ' of undefined in//[null] ' loading the model data overall read failed//Tslint define class with suffix error, re-cut assignment source onselect (each:
  Heroproperty): void {This.selectedhero = each; } const heroarray:heroproperty[] = [{id:1, Name: ' Asimov '}, {id:2, Name: ' Ironman '}, {ID:3, Name: ' Gen '}, {id:4, Name: ' Anglovlee '}];
  Export class Heroproperty {id:number;
name:string; }
 
The 
  is summarized as follows:  when the application loads, we see a list of heroes, but no heroes have been selected. The Selectedhero property is undefined. So, while we're going to show selectedhero.name in the template, we have to keep these heroic details out of the DOM before we select a hero. We can put the Hero detail content area of the template in a  div tag  and then add a ngif built-in instruction to set the Ngif value to the Selectedhero property of the component. When a hero is not selected, the ngif instruction removes the HTML that represents the heroic details from the DOM. Without the elements that represent heroic details, there is no need to worry about binding issues. When the user selects a hero, Selectedhero becomes a "defined" value, so ngif adds the hero details back to the DOM and calculates the various bindings it has nested.   full app.component.ts code   

Import {Component} from ' @angular/core '; @Component ({selector: ' app-root ', Template: '  
app.component.css File 
. 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;
}
 
app.module.ts File 
import {browsermodule} from ' @angular/platform-browser ', import {ngmodule} from ' @angular/co
Re ';
Import {Formsmodule} from ' @angular/forms ';

Import {appcomponent} from './app.component '; 
  @NgModule ({declarations: [appcomponent], imports: [Browsermodule, Formsmodule,], providers: [], Bootstrap: [Appcomponent]}) Export class Appmodule {}