javascript - Hur man hanterar HTML-logik i en separat fil

Jag har en bit HTML-kod som ansvarar för att visa en lista baserat på vissa villkor:

<!-- Show list only if there are more than 5 results -->
        <div list.numberOfResults > 10">
          <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
          <b>Country: </b>{{list.country}} 
        </div>

 <!-- Show list only if there are less than 10 results -->
        <div list.numberOfResults < 10">
          <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
          <b>Country: </b>{{list.country}} 
        </div>

Nu har jag också en valfri parameter (list.country) så jag behöver kolla om den inte är tom innan också.

Jag tror att det finns ett sätt att ta denna logik utanför denna HTML-fil och göra en fil som är ansvarig för logiken och HTML kommer att presentera datan därefter, kan någon vänligen dela ett enkelt exempel på hur detta kan göras baserat på min kod?

tack!!

Svar #1

Eftersom det finns två komponenter kan du hålla dem i en separat fil som namn

component.html

Då kan du importera i index.html som

<link rel="import" href="component.html" >

Eller så kan du bara ta en specifik del från filen som

   ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from component.html's document.
    var el = content.querySelector('.component');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>

Svar #2

DEMO :https://plnkr.co/edit/6atoS1WOK5RzKSmNeR8n?p=preview

Du kan använda ngSwitch när du vill visa HTML-delar villkorligt,

@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="list.numberOfResults>10">       // here

        <div *ngSwitchCase ="true">                  // here  
          <b> Template1 </b><br>
          <b>Name: </b>{{list.name}} <br>
          <b>ID: </b>{{list.id}} <br>
          <b>Country: </b>{{list.country}} 
        </div>


        <div *ngSwitchCase ="false">                 // here
          <b> Template2 </b><br>
          <b>Name: </b>{{list.name}} <br>
          <b>ID: </b>{{list.id}} <br>
          <b>Country: </b>{{list.country}} 
        </div>

    <div>
  `,
})
export class App {

    list={numberOfResults:2,name:'myList',id:1,country:'USA'}; 

}