fix: initial select is not displayed when list of items contains stri…

…ng value

src/demo/app/app.component.html

@@ -16,6 +16,7 @@
       <ul class="nav navbar-nav">
         <li routerLinkActive="active"><a routerLink="/flat">Flat</a></li>
         <li routerLinkActive="active"><a routerLink="/hierarchical">hierarchical</a></li>
+        <li routerLinkActive="active"><a routerLink="/simplevalue">simple value type</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->

src/demo/app/app.module.ts

@@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
 import { FlatComponent } from './components/flat.component';
 import { HierarchicalComponent } from './components/hierarchical.component';
 import { AppRoutes } from './app.routes';
+import { SimpleValueComponent } from './components/simple-value.component';
 
 @NgModule({
   imports: [
@@ -21,7 +22,8 @@ import { AppRoutes } from './app.routes';
   declarations: [
     AppComponent,
     FlatComponent,
-    HierarchicalComponent
+    HierarchicalComponent,
+    SimpleValueComponent
   ],
   bootstrap: [AppComponent]
 })

src/demo/app/app.routes.ts

@@ -1,8 +1,11 @@
 import { FlatComponent } from './components/flat.component';
 import { HierarchicalComponent } from './components/hierarchical.component';
+import { SimpleValueComponent } from "./components/simple-value.component";
 
 export const AppRoutes = [
   { path: '',   redirectTo: '/flat', pathMatch: 'full' },
   { path: 'flat', component: FlatComponent },
   { path: 'hierarchical', component: HierarchicalComponent },
+  { path: 'simplevalue', component: SimpleValueComponent },
+
 ];

src/demo/app/components/simple-value.component.html

@@ -0,0 +1,84 @@
+<div class="container">
+  <div class="page-header">
+    <h1>Exemple ngx-tree-select with flat datas</h1>
+  </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">Simple select</div>
+      <div class="panel-body">
+        <form novalidate>
+            <tree-select name="simpleSelect"
+                        [items]="items"
+                        childrenField="children"
+                        [(ngModel)]="simpleSelected"
+                        required=true
+                        #simpleSelect="ngModel"
+                        [filterPlaceholder]="FilterPlaceholder"
+                        [allowFilter]="ShowFilter"
+                        [disabled]="Disabled"
+                        [allowParentSelection]="AllowParentSelection"></tree-select>
+            <div *ngIf="simpleSelect.errors && (simpleSelect.dirty || simpleSelect.touched)" class="alert alert-danger">
+              <div [hidden]="!simpleSelect.errors.required">Simple select is required</div>
+            </div>
+        </form>
+        <div class="col-md-12">
+          {{simpleSelected}}
+        </div>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">Multiple select</div>
+      <div class="panel-body">
+        <form novalidate>
+          <tree-select name="multipleSelect"
+                      [items]="items"
+                      childrenField="children"
+                      [multiple]="true"
+                      [(ngModel)]="multipleSelected"
+                      filterPlaceholder="Type item filter..."
+                      required=true
+                      minlength="2"
+                      maxlength="4"
+                      [allowParentSelection]="AllowParentSelection"
+                      #multipleSelect="ngModel"
+                      [filterPlaceholder]="FilterPlaceholder"
+                      [maxVisibleItemCount]="MaxDisplayed"
+                      [allowFilter]="ShowFilter"
+                      [disabled]="Disabled">
+          </tree-select>
+          <div *ngIf="multipleSelect.errors && (multipleSelect.dirty || multipleSelect.touched)" class="alert alert-danger">
+            <div [hidden]="!multipleSelect.errors.required">Multiple select is required</div>
+            <div [hidden]="!multipleSelect.errors.minlength">You must choose at least 2 items on Multiple select</div>
+            <div [hidden]="!multipleSelect.errors.maxlength">You must choose maximum 4 items on Multiple select</div>
+          </div>
+        </form>
+        <div class="col-md-12">
+          <li *ngFor="let itm of multipleSelected">{{itm}}</li>
+        </div>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">Options</div>
+      <div class="panel-body">
+        <form class="form-horizontal" style="margin:15px">
+          <div class="form-group">
+            <label for="MaxDisplayed">Max elements displayed</label>
+            <input id="MaxDisplayed" type="number" name="MaxDisplayed" [(ngModel)]="MaxDisplayed" class="form-control" >
+          </div>
+          <div class="form-group">
+            <label for="FilterPlaceholder">Filter</label>
+            <input id="FilterPlaceholder" type="text" name="FilterPlaceholder" [(ngModel)]="FilterPlaceholder" [disabled]="!ShowFilter" class="form-control" >
+          </div>
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" [checked]="ShowFilter" (change)="ShowFilter = $event.target.checked"> Show filter
+            </label>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" [checked]="Disabled" (change)="Disabled = $event.target.checked"> Disabled
+            </label>
+          </div>
+        </form>
+      </div>
+    </div>
+</div>

src/demo/app/components/simple-value.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { FlatCountries } from '../../../datas';
+
+@Component({
+  selector: 'simple-value-sample',
+  templateUrl: './simple-value.component.html'
+})
+export class SimpleValueComponent {
+  public items = [
+    'Jacques',
+    'Jad',
+    'Jana',
+    'Jasmine',
+    'Jeremie',
+    'Jeremy',
+    'Joachim',
+    'Johan',
+    'Johanna',
+    'Jonathan',
+    'Jordan',
+    'Joseph',
+    'Jules',
+    'Justin'
+  ];
+
+  public ShowFilter = true;
+  public Disabled = false;
+  public FilterPlaceholder = 'Type here to filter elements...';
+  public MaxDisplayed = 5;
+
+
+  public simpleSelected = 'Jeremy';
+  public multipleSelected = ['Jeremy', 'Jordan'];
+}

src/lib/src/service/select.service.ts

@@ -214,14 +214,23 @@ export class SelectService {
   private getItemForModel(value: any, array: SelectableItem[]): SelectableItem[] {
     let result: SelectableItem[] = [];
     for (let v of array) {
-      if (value && value[this.Configuration.idProperty]) {
-        if (v.id === (value[this.Configuration.idProperty] || '').toString()) {
-          result.push(v);
+      if (value) {
+        if (typeof value !== 'object') {
+          if (v.data === value) {
+            result.push(v);
+          }
+        } else {
+          if (value[this.Configuration.idProperty]) {
+            if (v.id === (value[this.Configuration.idProperty] || '').toString()) {
+              result.push(v);
+            }
+          }
+          if (this.Configuration.isHierarchy() && v.children && v.children.length > 0) {
+            result = [...result, ...this.getItemForModel(value, v.children)];
+          }
         }
       }
-      if (this.Configuration.isHierarchy() && v.children && v.children.length > 0) {
-        result = [...result, ...this.getItemForModel(value, v.children)];
-      }
+
     };
     return result;
   }