fix(material/tree): not rendering initial data from flat data source (#22340)

The `MatTreeFlatDataSource` has an `initialData` parameter which doesn't work, because it only assigns the data to one of the three streams used to render the tree.

These changes also make some underscored properties private.

Fixes #22282.

Author: crisbeto

src/material/tree/data-source/flat-data-source.ts

@@ -127,32 +127,34 @@ export class MatTreeFlattener<T, F, K = F> {
  * to type `F` for `MatTree` to consume.
  */
 export class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
-  readonly _flattenedData = new BehaviorSubject<F[]>([]);
+  private readonly _flattenedData = new BehaviorSubject<F[]>([]);
+  private readonly _expandedData = new BehaviorSubject<F[]>([]);
 
-  readonly _expandedData = new BehaviorSubject<F[]>([]);
-
-  readonly _data: BehaviorSubject<T[]>;
   get data() { return this._data.value; }
   set data(value: T[]) {
     this._data.next(value);
     this._flattenedData.next(this._treeFlattener.flattenNodes(this.data));
     this._treeControl.dataNodes = this._flattenedData.value;
   }
+  private readonly _data = new BehaviorSubject<T[]>([]);
 
   constructor(private _treeControl: FlatTreeControl<F, K>,
               private _treeFlattener: MatTreeFlattener<T, F, K>,
-              initialData: T[] = []) {
+              initialData?: T[]) {
     super();
-    this._data = new BehaviorSubject<T[]>(initialData);
+
+    if (initialData) {
+      // Assign the data through the constructor to ensure that all of the logic is executed.
+      this.data = initialData;
+    }
   }
 
   connect(collectionViewer: CollectionViewer): Observable<F[]> {
-    const changes = [
+    return merge(
       collectionViewer.viewChange,
       this._treeControl.expansionModel.changed,
       this._flattenedData
-    ];
-    return merge(...changes).pipe(map(() => {
+    ).pipe(map(() => {
       this._expandedData.next(
         this._treeFlattener.expandFlattenedNodes(this._flattenedData.value, this._treeControl));
       return this._expandedData.value;

src/material/tree/data-source/nested-data-source.ts

@@ -18,13 +18,12 @@ import {map} from 'rxjs/operators';
  * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
  */
 export class MatTreeNestedDataSource<T> extends DataSource<T> {
-  readonly _data = new BehaviorSubject<T[]>([]);
-
   /**
    * Data for the nested tree
    */
   get data() { return this._data.value; }
   set data(value: T[]) { this._data.next(value); }
+  private readonly _data = new BehaviorSubject<T[]>([]);
 
   connect(collectionViewer: CollectionViewer): Observable<T[]> {
     return merge(...[collectionViewer.viewChange, this._data])

src/material/tree/tree.spec.ts

@@ -785,10 +785,6 @@ class MatTreeWithNullOrUndefinedChild {
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener, TREE_DATA);
 
-  constructor() {
-    this.dataSource.data = TREE_DATA;
-  }
-
   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 }
 

tools/public_api_guard/material/tree.d.ts

@@ -24,9 +24,6 @@ export declare class MatTree<T, K = T> extends CdkTree<T, K> {
 }
 
 export declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
-    readonly _data: BehaviorSubject<T[]>;
-    readonly _expandedData: BehaviorSubject<F[]>;
-    readonly _flattenedData: BehaviorSubject<F[]>;
     get data(): T[];
     set data(value: T[]);
     constructor(_treeControl: FlatTreeControl<F, K>, _treeFlattener: MatTreeFlattener<T, F, K>, initialData?: T[]);
@@ -53,7 +50,6 @@ export declare class MatTreeModule {
 }
 
 export declare class MatTreeNestedDataSource<T> extends DataSource<T> {
-    readonly _data: BehaviorSubject<T[]>;
     get data(): T[];
     set data(value: T[]);
     connect(collectionViewer: CollectionViewer): Observable<T[]>;